By Noxxxx from https://www.noxxxx.com/?post_type=post&p=2014
欢迎分享与聚合,尊重版权,可以联系授权
最近项目中有一个 Hover 的效果,当选中其中一个元素的时候高亮展示,其余的元素透明度 0.5,虽然使用 JS 的方案通过监听鼠标的移入移出来实现,但是实属多余。

由于 CSS 中还没有父节点选择器,所以当你 hover 一个元素的时候,你只能让其后面的同级元素发生样式改变,一个是 ~
一个是 +
,其实还可以通过 :not
选择器来变相的实现。
HTML 结构:
<div class="container">
<a href="#" class="item"></a>
<a href="#" class="item"></a>
<a href="#" class="item"></a>
<a href="#" class="item"></a>
<a href="#" class="item"></a>
</div>
状态定义:
- 未 Hover 时的状态
- 当有一个元素 Hover 时的状态
- 当一个元素被 Hover 后,剩余其他元素的状态
所以一共有三种状态。
1. 未 Hover 时的状态,通过父级来控制:
// initial default color
.container:not(:focus-within):not(:hover) {
.item {
background: #2888ff;
opacity: 1;
}
}
2. 其中一个元素被 Hover,很简单,没有特殊逻辑。
.item :hover {
background: #00c394;
opacity: 1;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
transform: scale(1.1);
z-index: 1;
}
3. 当一个元素被 Hover 后,其他元素的状态,因为父级元素会跟随子元素被 Hover 后而失效,进而由子元素掌控样式。
.item {
opacity: 0.5;
background: #2888ff; // items default color
}