CSS 多个 item hover 突出效果

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