In the provided example, I am attempting to decrease the opacity of non-hover elements on an HTML page.
The code snippet below successfully reduces the opacity of non-overlapping elements. However, when there is a background element that overlaps and should not be affected by hovering (like the green square below), the elements that are supposed to be "hoverable" (such as the red circle and blue rectangle) get dimmed even when the cursor is on the background shape.
To clarify:
- The green square: should not react to hover events
- The red circle: should dim all other elements when hovered over, excluding the green square
- The blue rectangle: should dim all other elements when hovered over, excluding the red circle and green square
Is there a way to prevent dimming all elements when hovering over the green square?
.parent:hover .child {
opacity: 0.2;
transition: all .3s;
}
.parent .child:hover {
opacity: 1;
transition: all .3s;
}<svg width="250" height="250">
<g class="parent">
<rect x="0" y="0" width="150" height="150" fill="green"/>
<g class="child">
<circle cx="30" cy="45" r="25" fill="red"/>
</g>
<g class="child">
<rect x="60" y="80" width="60" height="30" fill="blue"/>
</g>
</g>
</svg>