CSS SNIPPET

  返回

淡化兄弟元素  交互体验

鼠标悬停时为兄弟元素增加淡化效果。

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;
}
效果演示
Item 1 Item 2 Item 3 Item 4 Item 5 Item 6
代码说明
  1. transition: opacity 0.2s 表示透明度的变化将以0.2秒过渡完成
  2. .sibling-fade:hover span:not(:hover) 选中当父元素有鼠标悬停时 没有鼠标悬停的所有span子元素,然后将其透明度修改为 0.5
浏览器支持

100.0%