How to Prevent Parent Hover Effects When Hovering Over a Child Element in Nested DIVs?

Nested DIVs: Disabling Hover Effects on Parents When Child is Hovered

In this scenario, you have two nested DIV elements, labeled as ".parent" and ".child." When hovering over ".parent," you want its background color to change. However, upon hovering over ".child," you want ".parent" to revert to its default gray background.

CSS Code for Parent and Child Hover Effects:

<code class="css">.parent {
  width: 100px;
  height: 100px;
  padding: 50px;
  background: lightgray;
}

.parent:hover {
  background: lightblue;
}

.child {
  height: 100px;
  width: 100px;
  background: darkgray;
}

.child:hover {
  background: lightblue;
}</code>

Problem:

The CSS code above successfully applies the desired hover effects to both ".parent" and ".child." However, it does not address the requirement to disable the hover effect on ".parent" when ".child" is hovered.

Solution Using a Sibling Element:

As it turns out, CSS does not provide a direct way to achieve this effect with nested elements. However, you can employ a clever workaround using a sibling element.

1. Add a new DIV sibling with class ".sibling" inside the ".parent" container.
2. Position the ".sibling" element to cover the ".child" element using 'top' and 'left' CSS properties.
3. Set a higher 'z-index' value for ".sibling" to ensure it appears above ".child."
4. Add the same background color transition effect to ".sibling" that you applied to ".parent."

Updated CSS with Sibling Element:

<code class="css">.parent {
  ... (unchanged)
}

.child {
  ... (unchanged)
}

.sibling {
  position: relative;
  width: 100px;
  height: 100px;
  padding: 50px;
  top: -50px;
  left: -50px;
  background: #3D6AA2;
  transition: background-color 1s;    
}

.sibling:hover {
  background: #FFF;
}</code>

How it Works:

When the mouse cursor hovers over ".child," the background color of ".child" changes. Simultaneously, the background color of ".sibling" also changes due to the hover effect applied to it. Since ".sibling" covers ".child," the change in its background color effectively overrides the hover effect applied to ".parent." This gives the illusion that the hover effect on ".parent" has been disabled.

The above is the detailed content of How to Prevent Parent Hover Effects When Hovering Over a Child Element in Nested DIVs?. For more information, please follow other related articles on the PHP Chinese website!