将鼠标悬停在嵌套 DIV 中的子元素上时如何防止父级悬停效应？

嵌套 DIV：当子项悬停时禁用对父项的悬停效果

在此场景中，您有两个嵌套 DIV 元素，标记为“ .parent”和“.child”。将鼠标悬停在“.parent”上时，您希望更改其背景颜色。但是，将鼠标悬停在“.child”上时，您希望“.parent”恢复为默认的灰色背景。

父级和子级悬停效果的 CSS 代码：

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

问题：

上面的 CSS 代码成功地将所需的悬停效果应用于“.parent”和“.child”。但是，它没有解决当“.child”悬停时禁用“.parent”悬停效果的要求。

使用同级元素的解决方案：

事实证明，CSS 没有提供直接的方法来通过嵌套元素实现这种效果。但是，您可以使用同级元素来采用巧妙的解决方法。

1. 在“.parent”容器内添加类为“.sibling”的新 DIV 同级元素。
2. 将“ .sibling”元素使用“top”和“left”CSS属性覆盖“.child”元素。
3. 为“.sibling”设置更高的“z-index”值，以确保它出现在“.sibling”上方。
4. 向“.sibling”添加与应用于“.parent”相同的背景颜色过渡效果。

使用 Sibling 元素更新了 CSS：

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

工作原理：

当鼠标光标悬停在“.child”上时，“.child”的背景颜色会发生变化。同时，“.sibling”的背景颜色也会由于悬停效果而发生变化。由于“.sibling”覆盖了“.child”，因此其背景颜色的更改有效地覆盖了应用于“.parent”的悬停效果。这给人一种“.parent”上的悬停效果已被禁用的错觉。

以上是将鼠标悬停在嵌套 DIV 中的子元素上时如何防止父级悬停效应？的详细内容。更多信息请关注PHP中文网其他相关文章！