Fades out the siblings of a hovered item.
transition: opacity 0.2s
specifies that changes to opacity will be transitioned over 0.3 seconds..sibling-fade:hover span:not(:hover)
specifies that when the parent is hovered, select anyspan
children that are not currently being hovered and change their opacity to0.5
.
预览
Item 1 Item 2 Item 3 Item 4
Item 5 Item 6
Item 5 Item 6
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.3s;
}
.sibling-fade:hover span:not(:hover) {
opacity: 0.5;
}