css 淡出悬停项目的同级

>>> 效果预览

淡出悬停项目的同级。

HTML

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

CSS

span {
  padding: 0 1rem;
  transition: opacity 0.2s;
}
.sibling-fade:hover span:not(:hover) {
  opacity: 0.5;
}

说明

1. transition: opacity 0.2s 指定不透明度的更改将在0.2秒内转换。
2. .sibling-fade:hover span:not(:hover) 指定当父项被徘徊时，选择当前没有被徘徊的任何span子项并将其不透明度更改为0.5 。 。