Html CSS - 悬停通过元素激活覆盖元素上的悬停
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9738984/
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 passes through elements to activate hover on covered element
提问by jdavis
I have a page layout involving a lot of position absolute and z-indexing, so there are a lot of elements that are overlapping one another.
我有一个页面布局，涉及很多绝对位置和 z 索引，所以有很多元素相互重叠。
One of the elements just contains text and it hovers over top of a lot of other things.
其中一个元素只包含文本，它悬停在许多其他内容之上。
Underneath that element there are several elements that have CSS Hover Pseudo Classes applied.
在该元素下方有几个应用了 CSS 悬停伪类的元素。
When the mouse passes over the element containing text, I would like for somehow the Element underneath to respond to the presence of the mouse and activate the pseudo class styles.
当鼠标经过包含文本的元素时，我希望下面的元素以某种方式响应鼠标的存在并激活伪类样式。
Is there any way to style an element so it allows the hover to pass through it to any elements underneath?
有什么方法可以为元素设置样式，以便允许悬停通过它传递到下面的任何元素？
This wouldn't be too hard with JavaScript, but I would rather not go that route at the moment in order to keep things as simple as they can be. I'll be complicating things with JavaScript enough later.
这对于 JavaScript 来说不会太难，但我现在宁愿不走那条路，以使事情尽可能简单。稍后我将使用 JavaScript 使事情复杂化。
Thanks
谢谢
P.S. - I'm using HTML5 and CSS3 already, so I would have no problem with solutions utilizing these newer standards.
PS - 我已经在使用 HTML5 和 CSS3，所以我对使用这些较新标准的解决方案没有任何问题。
回答by Fabrizio Calderan
you can use pointer-events: none;to the element on top:
您可以使用pointer-events: none;顶部的元素：
div {
width : 200px;
height : 200px;
float : left;
cursor : pointer;
border : 1px green solid;
}
div + div:hover { background: #a1a6c8; }
div:first-child {
pointer-events : none;
position : absolute;
top : 100px;
left : 100px;
border : 1px green solid;
background : #c1c6c8;
} <div> on top of all: hover me </div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
as you can see, when you hover the element on the top the element behind is activated. For more info about this property: https://developer.mozilla.org/en/CSS/pointer-events
如您所见，当您将元素悬停在顶部时，后面的元素被激活。有关此属性的更多信息：https: //developer.mozilla.org/en/CSS/pointer-events
回答by SimplyPhy
Also, something that people may find useful is that you can re-enable pointer events on child elements of the pointer-events:none element by setting them to pointer-events:auto explicitly. This doesn't seem to be well documented and turns out to be very useful. – slicedtoad
此外，人们可能会发现有用的一点是，您可以通过将指针事件显式设置为 pointer-events:auto 来重新启用 pointer-events:none 元素的子元素上的指针事件。这似乎没有很好的文档记录，结果证明非常有用。– 切片蟾蜍
@slicedtoad's comment was hugely useful for me, so I think it deserves a full answer. If you set pointer-events: noneto a parent, you'll disable the events for it's children. HOWEVER, if you set point-events: autoto the children, they will work again.
@slicedtoad 的评论对我非常有用，所以我认为它值得一个完整的答案。如果您设置pointer-events: none为父级，则将禁用其子级的事件。但是，如果您设置point-events: auto为孩子，他们将再次工作。
This also works when the children have a negative z-index, and therefore become unresponsive to pointer-events.
这也适用于孩子有一个负数z-index，因此对指针事件没有反应。
