把元素变成卡片

Question

我需要将div元素转换为某种“卡片”。即所有子项都应变为不可选择，不可点击但仍可见。我在div上尝试了user-select: none，但这并不会影响所有的孩子。

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>