css 兄弟姐妹褪色

淡出悬停项的同级。

使用 a 对 所做的更改进行动画处理。 transitionopacity
使用 和 伪类选择器更改除鼠标所在的元素之外的所有元素。 :hover:notopacity0.5

<div class="sibling-fade">
  <span>Item 1</span> <span>Item 2</span> <span>Item 3</span>
  <span>Item 4</span> <span>Item 5</span> <span>Item 6</span>
</div>

span {
  padding: 0 16px;
  transition: opacity 0.3s;
}

.sibling-fade:hover span:not(:hover) {
  opacity: 0.5;
}