使用以下 html，当我将鼠标悬停在子级上时，父级上会出现绿色背景。我怎样才能阻止这种情况发生？如果我悬停在子元素之外，我确实想要绿色背景。
CSS3 很好。
.parent {
padding: 100px;
width: 400px;
height: 400px;
}
.parent:hover {
background-color: green;
}
.child {
padding: 100px;
width: 200px;
height: 200px;
}
.child:hover {
background-color: blue;
}
<div class="parent">
<div class="child">Child</div>
</div>
所以这真的很难看，但它确实有效（有点）。我基本上是在创建父母的副本作为孩子的兄弟姐妹。父覆盖默认隐藏，然后在子项悬停时显示。 Chrome 不喜欢它，除非您使用 + 选择器而不是 ~ 选择器。这不是很可扩展，但它可能有效。
正如其他人发布的那样，javascript 可能是一个更好的解决方案。
<style>
.parent { padding: 100px; width: 400px; height:400px; position: relative; z-index: 998; }
.parent:hover { background-color: green; }
.child { padding: 100px; width: 200px; height:200px; position: relative; z-index: 1000; }
.child:hover { background-color: blue; }
.parent-overwrite { padding: inherit; width: inherit; height: inherit; position: absolute; top: 0; left: 0; z-index: 999; background-color: #FFF; display: none; }
.child:hover ~ .parent-overwrite { display: block; }
</style>
<div class="parent">
<div class="child">Child</div>
<div class="parent-overwrite"></div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
