andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
11eff23e47b0cf8b0af706090127ebf3685ace3f
30-seconds-of-code/snippets/sibling-fade.md
atomiks 11eff23e47 Autoscoping (#103) 
* Add autoscoping with generated demo

* Remove manual demo from all snippets

* Add JavaScript inside IIFE

* Align mouse-cursor-gradient-tracking.md to demo code

* Match snippets to demo

* Update CONTRIBUTING.md

* Create reusable function for code extraction
2018-10-05 09:18:51 +10:00

900 B
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

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.