兄弟元素淡出

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

• 使用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;
}