andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
8ea3775a1036fc2c38f67e61ea850685c7674aeb
30-seconds-of-code/snippets/sibling-fade.md
atomiks 21f53c14d2 Add browser support to sibling-fade
2018-03-05 18:21:30 +10:00

1.4 KiB
Raw Blame History

Sibling fade

Fades out the siblings of a hovered item.

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;
}

Demo

Item 1 Item 2 Item 3 Item 4 Item 5 Item 6
<style> .snippet-demo__sibling-fade { cursor: default; line-height: 2; vertical-align: middle; } .snippet-demo__sibling-fade span { padding: 1rem; transition: opacity 0.2s; } .snippet-demo__sibling-fade:hover span:not(:hover) { opacity: 0.5; } </style>

Explanation

  1. transition: opacity 0.2s specifies that changes to opacity will be transitioned over 0.2 seconds.
  2. .sibling-fade:hover span:not(:hover) specifies that when the parent is hovered, select any span children that are not currently being hovered and change their opacity to 0.5.

Browser support

✅ No caveats.