CSS悬停同级，但不是一个
提问于 2020-12-07 18:47:18
下面的示例应该，当悬停粉色框时，所有其他粉色框都会褪色(不透明度为0)。这已经完成了。但是，当鼠标悬停在蓝色框中时，所有粉色框都不会受到影响
.row {
display: flex;
}
.row div {
width: 25%;
height: 100px;
transition: all 0.6s;
}
.row .rosybrown {
background-color: rosybrown;
}
.row .blue {
background-color: lightskyblue;
}
.row:hover .rosybrown:not(:hover) {
opacity: 0;
} <div class="row">
<div class="blue"></div>
<div class="rosybrown"></div>
<div class="rosybrown"></div>
<div class="rosybrown"></div>
</div>
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-12-07 20:18:50
pointer-events可以做到
.row {
display: flex;
pointer-events:none; /* disable for parent and all childs */
}
.row div {
width: 25%;
height: 100px;
transition: all 0.6s;
}
.row .rosybrown {
background-color: rosybrown;
pointer-events:initial; /* re-enable only for brown elements */
}
.row .blue {
background-color: lightskyblue;
}
.row:hover .rosybrown:not(:hover) {
opacity: 0;
}<div class="row">
<div class="blue"></div>
<div class="rosybrown"></div>
<div class="rosybrown"></div>
<div class="rosybrown"></div>
</div>
Stack Overflow用户
发布于 2020-12-07 19:20:24
如果您可以使用javascript设置一些基本的事件侦听器，这就很容易做到。然而，我不知道您如何使用纯css来实现这一点。下面是一个如何在js中实现此功能的工作示例！
for (const el of document.getElementsByClassName('rosybrown')) {
el.addEventListener('pointerover', (e) => {
e.target.parentElement.classList.add('rosybrown-hovered');
e.target.classList.add('hovered');
});
el.addEventListener('pointerout', (e) => {
e.target.parentElement.classList.remove('rosybrown-hovered');
e.target.classList.remove('hovered');
});
}.row {
display: flex;
}
.row div {
width: 25%;
height: 100px;
transition: all 0.6s;
}
.row .rosybrown {
background-color: rosybrown;
}
.row .blue {
background-color: lightskyblue;
}
.row.rosybrown-hovered .rosybrown:not(.hovered) {
opacity: 0;
}<div class="row">
<div class="blue"></div>
<div class="rosybrown"></div>
<div class="rosybrown"></div>
<div class="rosybrown"></div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65187608
复制相关文章
点击加载更多
腾讯云开发者
