How to Prevent a Parent Element\'s Hover Effect from Triggering When Hovering Over a Child Element?

Hover Effect on Parent and Child Elements

To address the challenge of disabling a parent element's hover effect when the cursor moves over a nested child element, let's consider the following solution:

CSS :has Selector (introduced in 2024)

With the introduction of the CSS :has selector, you can directly style a parent element based on the hover state of its child. For example:

.parent:has(.child:hover) {
    background: normal;
}

This code ensures that when the cursor hovers over the child element with the class "child," the background color of the parent element with the class "parent" returns to its original state.

Sibling Element Trick

Prior to the :has selector, a workaround was to use a sibling element:

<div class="parent">
    <div class="sibling"></div>
    <div class="child"></div>
</div>

The sibling element is positioned using absolute positioning to overlap the child element. When you hover over the child element, the sibling element's hover effect is activated, overriding the parent element's hover effect.

.child:hover ~ .sibling {
    background: #FFF; // Override parent's background color
}

Limitations

Note that these solutions rely on the structure of the nested elements and may not work in all cases.

The above is the detailed content of How to Prevent a Parent Element\'s Hover Effect from Triggering When Hovering Over a Child Element?. For more information, please follow other related articles on the PHP Chinese website!