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;
}