CSS 悬停在 div 上，但如果悬停在他的孩子身上则不会
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22270078/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS hover on a div, but not if hover on his children
提问by Nillus
I looked if this question had already been answered, but couldn't find anything, only questions on the reverse css rule I am looking for.
我查看了这个问题是否已经得到回答，但找不到任何内容，只有关于我正在寻找的反向 css 规则的问题。
I have a div that contains one or more child, and I want it to change its background on hover, but not if hovering one of its children; I need the :hover rule to be restricted to pure element, not its offsprings it contains. Being not a parent rule in CSS, and being :hover triggered whenever the mouse passes over the parent AND its children, I find myself out of ideas, and maybe this result is impossible to achieve with only CSS. However, the question is about CSS, so no JS or JQuery solution is needed (I can provide that by myself)
我有一个包含一个或多个孩子的 div，我希望它在悬停时更改背景，但如果悬停其中一个孩子，则不会；我需要 :hover 规则仅限于纯元素，而不是它包含的后代。由于不是 CSS 中的父规则，并且每当鼠标经过父级及其子级时都会触发 :hover，我发现自己没有想法，也许仅使用 CSS 不可能实现这种结果。但是，问题是关于 CSS，所以不需要 JS 或 JQuery 解决方案（我可以自己提供）
Code:
代码：
HTML
HTML
<div class="parent">Text of the parent
<p class="class1">I do not need to trigger parent's background color change!</p>
</div>
CSS
CSS
.parent {
background: #ffffff;
}
.parent:hover {
background: #aaaaff;
}
.class1 {
margin: 10px;
}
采纳答案by Zach Saucier
The ability to stop an element's hover effect when the child is hovered is not currently possible with the CSS selectors that we have, this is as close as we can getwithout javascript - affecting the child on hover in addition to affecting the parent. This will only work if the child is 100% of the width and height of the parent
我们现有的 CSS 选择器目前无法在子元素悬停时停止元素的悬停效果，这是我们在没有 javascript 的情况下所能获得的最接近的效果——除了影响父元素之外，还影响悬停时的子元素。这仅在子项是父项宽度和高度的 100% 时才有效
In the CSS4 draftthere is a parent selector !which could be used in cases like this as follows:
在CSS4 草案中，有一个父选择器!，可以在如下情况下使用：
.parent! .class1:hover {
background: #ffffff;
}
But we don't have that capability yet
但是我们还没有那个能力
回答by sam thomas
You can simply achieve this by adding this property to the child class CSS.
您可以通过将此属性添加到子类 CSS 来简单地实现这一点。
pointer-events: none;
This worked for me.
这对我有用。
回答by creeation
Fiddlebased on this answer:
<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>
You should go with JavaScript on this. It's currently not reallypossible with pure CSS, as Zack Saucier already said.
你应该在这方面使用 JavaScript。正如 Zack Saucier 已经说过的那样，目前使用纯 CSS不太可能。
回答by Mike
You cannot do that with pure CSS, but it's easy to achieve with jQuery. So when you hover over a child, you do not want to amend the parent.
使用纯 CSS 无法做到这一点，但使用 jQuery 很容易实现。因此，当您将鼠标悬停在子项上时，您不想修改父项。
https://jsfiddle.net/8nqfLgsk/2/
https://jsfiddle.net/8nqfLgsk/2/
$(".list-categories li a").hover( function(){
$(this).toggleClass("active-btn");
});
Basically with this, you're only adding a class to the element which you're hovering over, without amending parent.
基本上有了这个，您只需将一个类添加到您悬停在其上的元素，而无需修改父元素。
