How to Disable Hover Effect on Parent When Hovering Over Child in CSS?

The Solution:

Using pure CSS, it was previously impossible to achieve this effect directly. However, with the recent introduction of the :has selector in 2024, it is now possible to address this issue:

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

/* The solution using the :has selector */
.parent:has(.child:hover) {
  background: lightgray;
}</code>

By targeting the parent element that has a hovered child element, we can effectively disable the hover effect on the parent when the child is hovered.

Previous Limited Solution (Pre-2024):

Prior to the introduction of the :has selector, a workaround was to use a sibling element to achieve a similar effect:

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

.child {
  height: 100px;
  width: 100px;
  background: #355E95;
  transition: background-color 1s;
  position: relative;
  top: -200px;
}

.child:hover {
  background: #000;
}

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

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

This approach involved creating a sibling element that is positioned on top of the child element. When the child is hovered, the sibling's background color changes, effectively hiding the parent's background.

The above is the detailed content of How to Disable Hover Effect on Parent When Hovering Over Child in CSS?. For more information, please follow other related articles on the PHP Chinese website!