使 css :hover 只影响父元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12652525/
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
Make css :hover only affect parent element
提问by CupOfTea696
In css, how can I stop the :hoverevent being triggered in a parent element when a child event is hovered, so that it only gets triggered when the parent itself gets hovered? In this case my child element is actually positioned outside it's parent element with absolute positioning, so it's a bit weird when the parent changes when the child gets hovered.
在 css 中，如何:hover在子事件悬停时停止在父元素中触发的事件，以便仅在父元素悬停时触发它？在这种情况下，我的子元素实际上位于具有绝对定位的父元素之外，因此当子元素悬停时父元素发生变化时，这有点奇怪。
I made a JSFiddleto illustrate the problem.
我做了一个JSFiddle来说明这个问题。
Here's a JSFiddleof the used solution to my example.
这是我的示例所用解决方案的JSFiddle。
回答by Litek
There is a pure css solution (even two in fact) but both come at a cost.
有一个纯 css 解决方案（实际上甚至两个），但两者都是有代价的。
You can add pointer-events:none; to your child element - but it will not respond to it's own hover styles either. Pointer-eventsunfortunately are not supported in IE below version 11 (http://caniuse.com/#search=pointer-events).
Wrap content of your parent element (apart from positioned child) in another one (thats the cost of this method) and apply hover styles to this wrapper.
您可以添加指针事件：无；到您的子元素 - 但它也不会响应它自己的悬停样式。不幸的是，低于版本 11 ( http://caniuse.com/#search=pointer-events) 的IE 不支持指针事件。
将父元素的内容（除了已定位的子元素）包装在另一个元素中（这是此方法的成本），并将悬停样式应用于此包装器。
Examples of both methods here.
这两种方法的例子在这里。
.parent-2,
.parent { position:relative; background:#ddd; width:100px; height:100px; }
.parent:hover { background:blue; }
.child { position:absolute; top:0; left:130px; width:100px; height:50px; border:1px solid blue; pointer-events:none; }
/* doesn't work in opera and ie */
.content { position:absolute; top:0; left:0; width:100%; height:100%; z-index:0;}
.content:hover { background:blue; }
回答by Chris
Simply: don't nest your #innerdivinside. Little demo: little link. Note that I added:
简单地说：不要嵌套你的#innerdiv内心。小演示：小链接。请注意，我添加了：
html, body {
position: relative;
}
Which is necessary in this case.
在这种情况下这是必要的。
Edit:in case you insist on having it nested, a bit of JavaScript is necessary. Here's a sample:
编辑：如果您坚持要嵌套它，则需要一些 JavaScript。这是一个示例：
var inn = document.getElementById("inner"), outt = document.getElementById("holder");
outt.onmouseover = function() {
this.style.backgroundColor = "rgb(0, 162, 232)"; /*I like this color :)*/
}
outt.onmouseout = function() {
this.style.backgroundColor = "orange";
}
inn.onmouseover = function(ev) {
ev.stopPropagation();
}
(This would be shorter if written using jQuery, but the idea is the same).
（如果使用 jQuery 编写会更短，但想法是相同的）。
Here's a demo: little link.
这是一个演示：小链接。
回答by PRB
You need to use a bit of JavaScript to stop the event from bubbling. Take a look at this example:
您需要使用一些 JavaScript 来阻止事件冒泡。看看这个例子：
