How to Suspend Parent Hover Effects When Hovering Over a Child Element?-CSS Tutorial-php.cn

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

Linda Hamilton

Release： 2024-11-02 17:50:29

Original

983 people have browsed it

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>

Copy after login

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

Copy after login

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>

Copy after login

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!