将鼠标悬停在子元素上时如何暂停父元素悬停效果？
悬停在子元素上并暂停父元素悬停效果
当嵌套
时元素共存时，将鼠标悬停在子元素上可能会干扰应用于父元素的悬停效果。相反，您可能希望在将鼠标悬停在子元素上时停用父元素上的悬停效果。
CSS 解决方案
在不使用 JavaScript 的情况下实现此行为需要巧妙的解决方法使用同级元素。
<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>登录后复制
同级元素技巧
同级元素绝对定位在父元素内，并且与父元素和子元素重叠。它超出了父元素的范围，可以有效捕获所有不专门针对子元素的悬停事件。
当兄弟元素悬停时，其背景颜色变为白色，从而在视觉上消除父元素的悬停效果。当子元素悬停时，其自身的悬停效果仍然存在，但白色同级元素隐藏了父元素的悬停效果。
近期进展
请注意 :has( ) 选择器现在存在，可以根据特定后代的存在直接定位父元素。这种方法可以用来更优雅地实现所需的行为。
<code class="css">.parent:has(.child:hover) {
background: lightgray !important;
}</code>登录后复制
以上是将鼠标悬停在子元素上时如何暂停父元素悬停效果？的详细内容。更多信息请关注PHP中文网其他相关文章！
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机