我需要将一个 div
元素变成某种“卡片”。 IE。所有的 child 都应该变得不可选择,不可点击,但仍然可见。我在 div 上尝试了 user-select: none
,但它不会影响所有的 child 。
最佳答案
在上面放一个透明层,就像这样:
.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>
关于css - 将元素变成卡片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54087562/