Effect all siblings on mouse hover with CSS
When you over over a child class the other children's opacity is set to 10% using CSS. An easy way to utilize CSS vs Interactions to control children elements.
When you over over a child class the other children's opacity is set to 10% using CSS. An easy way to utilize CSS vs Interactions to control children elements.
How to add it
- Add CSS code snippet via an embed or added to your pages head section.
- Update class names if needed, this code uses class child
The code
CSS
<style>
.parent:hover > .child:not(:hover){
opacity: 0.1;
}
</style>
HTML
<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>
