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>

状态定义：

1. 未 Hover 时的状态
2. 当有一个元素 Hover 时的状态
3. 当一个元素被 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
}

效果

See the Pen Untitled by hjoker (@hjoker) on CodePen.