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

Hovering on a Child Element and Suspending Parent Hover Effects

When nested

elements coexist, hovering over the child element can interfere with the hover effect applied to the parent element. Conversely, you may desire a hover effect on the parent element to deactivate when hovering over the child.

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn