css - 将元素变成卡片

Question

我需要将一个div元素变成某种“卡片”。即所有的孩子都应该变得不可选择、不可点击，但仍然可见。我在 div 上试过user-select: none，但它不会影响所有的孩子。

标签： css

Answer 1

在上面放一个透明层，就像这样：

.card {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid red;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.card::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: transparent;
  top: 0px;
  left: 0px;
}

.elememt-1 {
 width: 40px;
 height: 40px;
 background: orange;
 border: 1px solid black;
}

<div class="card">
   <div class="elememt-1"></div>
   <div class="elememt-1"></div>
   <div class="elememt-1"></div>
   <div class="elememt-1"></div>
      <div class="elememt-1"></div>
   <div class="elememt-1"></div>
   <div class="elememt-1"></div>
   <div class="elememt-1"></div>
      <div class="elememt-1"></div>
   <div class="elememt-1"></div>
   <div class="elememt-1"></div>
   <div class="elememt-1"></div>
</div>