兄弟元素淡出

当鼠标悬停在一个项目上时,使其兄弟元素淡出。

  • 使用transition来动画改变opacity的值。
  • 使用:hover:not伪类选择器将除鼠标悬停元素外的所有元素的opacity设置为0.5
<div class="sibling-fade">
  <span>项目1</span> <span>项目2</span> <span>项目3</span>
  <span>项目4</span> <span>项目5</span> <span>项目6</span>
</div>
span {
  padding: 0 16px;
  transition: opacity 0.3s;
}

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