最近项目中有一个 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);