如何应用子：悬停但不应用父：悬停
使用以下 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>With the following html, when I hover over child, I get a green background on parent. How can I stop that from happening? I do want the green background if I am hovering outside of the child element.
CSS3 is fine.
.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>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
2022 年：
现在可以使用
的组合来实现这一目标:has和:not伪类，具有以下表达式：分解：
原始代码片段的工作修改如下：
还可以通过重用
.parent选择器代替.child选择器来使其递归。请参阅此处的浏览器支持。在撰写本文时，所有主要浏览器都支持它——除了 Firefox，它仍然有一个有缺陷的实验实现。
In 2022:
This can be now achieved using a combination of the
:hasand:notpseudo-classes, with the following expression:To break it down:
A working modification of the original snippet is below:
It can also be made recursive by reusing the
.parentselector in place of the.childselector.See browser support here. At the time of writing, all major browser support it—except Firefox, which still has a flawed experimental implementation.
所以这真的很难看，但它确实有效（有点）。我基本上是在创建父母的副本作为孩子的兄弟姐妹。父覆盖默认隐藏，然后在子项悬停时显示。 Chrome 不喜欢它，除非您使用 + 选择器而不是 ~ 选择器。这不是很有可扩展性，但它可能会起作用。
正如其他人发布的那样，javascript 可能是一个更好的解决方案。
So this is REALLY ugly, but it works (kind of). I'm basically creating a duplicate of parent as a sibling of child. parent-overwrite is hidden by default, then displayed on the hover of child. Chrome doesn't like it unless you use the + selector instead of the ~ selector. This isn't very scalable, but it may work.
As the other guys posted, javascript would likely be a better solution.
我只能通过添加额外的标记来做到这一点。需要添加一个空 div，其本质上充当父背景。看看这里的 CSS。
HTML 部分：
CSS 部分：
http://jsbin. com/ubiyo3/编辑
I can only do this with adding additional markup. An empty div needs to be added that essentially functions as the parent background. Take a look at the CSS here.
HTML Part:
CSS part:
http://jsbin.com/ubiyo3/edit
最简单的方法可能是使用 JS 来实现此类 CSS。也许您可以尝试重新考虑您的实施。你为什么要做这样的事情？
The easiest thing to do may be to use JS for this sort of CSS. Maybe you can try to rethink your implementation. Why are you trying to do something like this?
使用普通 CSS 是不可能实现这一点的。您要求子级的伪类 (
child:hover) 来影响父级的background声明。没有办法使用常规 css 来指定此类内容。这绝对可以使用 javascript 来完成。
This is not possible using plain-vanilla CSS. You're asking for a pseudo-class of a child (
child:hover) to affect thebackgrounddeclaration of a parent. There's no way to specify that sort of thing using regular css.This can definitely be done using javascript.
我有一个我认为更好的解决方案，因为它可以扩展到更多级别，想要多少就多少，而不仅仅是两个或三个。
我使用边框，但也可以使用任何想要的样式，例如背景颜色。
对于边框，其想法是：
您可以在以下位置进行测试： http://jsbin.com/ubiyo3/13
这是代码：
I have what i think is a better solution, since it is scalable to more levels, as many as wanted, not only two or three.
I use borders, but it can also be done with whatever style wanted, like background-color.
With the border, the idea is to:
You can test it at: http://jsbin.com/ubiyo3/13
And here is the code: