How to Suspend Parent Hover Effects When Hovering Over a Child Element?

The CSS Solution

Achieving this behavior without JavaScript requires a clever workaround using a sibling element.

<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;
}

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

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

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

The Sibling Element Trick

The sibling element is positioned absolutely within the parent element and overlaps both the parent and child elements. It extends beyond the bounds of the parent to effectively capture all hover events not specifically targeting the child element.

When the sibling element is hovered, its background-color changes to white, thereby visually nullifying the parent's hover effect. When the child element is hovered, its own hover effect remains, but the white sibling element conceals the parent's hover effect.

Recent Developments

Note that the :has() selector now exists, enabling direct targeting of parent elements based on the presence of specific descendants. This approach can be used to achieve the desired behavior more elegantly.

<code class="css">.parent:has(.child:hover) {
  background: lightgray !important;
}</code>

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