首页  >  文章  >  web前端  >  将鼠标悬停在嵌套 DIV 中的子元素上时如何防止父级悬停效应?

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

Mary-Kate Olsen
Mary-Kate Olsen原创
2024-11-03 03:02:29143浏览

How to Prevent Parent Hover Effects When Hovering Over a Child Element in Nested DIVs?

嵌套 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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn