Skip to content

Instantly share code, notes, and snippets.

@nocodesupplyco

nocodesupplyco/effect-siblings-on-hover.html Secret

Created December 19, 2022 16:58
Show Gist options
  • Save nocodesupplyco/604e6915e7c93548e37db5b87db2d53c to your computer and use it in GitHub Desktop.
Save nocodesupplyco/604e6915e7c93548e37db5b87db2d53c to your computer and use it in GitHub Desktop.
Download ZIP
Effect All Siblings on Hover With CSS
Raw
effect-siblings-on-hover.html
<style>
.parent:hover > .child:not(:hover) {
opacity: 0.1;
}
</style>
<div class="parent">
<div class="child">first item</div>
<div class="child">second item</div>
<div class="child">third item</div>
<div class="child">fourth item</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment