兄弟元素淡出
当鼠标悬停在一个项目上时,使其兄弟元素淡出。
- 使用
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;
}