CSS - Hover传递元素以激活覆盖元素上的悬停

Question

我的页面布局涉及很多位置绝对和z索引,所以有很多元素彼此重叠.

其中一个元素只包含文本,它徘徊在很多其他东西之上.

在该元素下面有几个应用了CSS Hover Pseudo Classes的元素.

当鼠标经过包含文本的元素时,我想以某种方式下面的元素响应鼠标的存在并激活伪类样式.

有没有什么方法可以设置一个元素的样式,以便它允许悬停通过它到下面的任何元素？

这对于JavaScript来说并不会太难,但我宁愿现在不去那条路,以保持事情的简单.稍后我会用JavaScript复杂化.

谢谢

PS - 我已经使用HTML5和CSS3了,所以我对使用这些新标准的解决方案没有任何问题.

Answer 1

你可以使用pointer-events: none;顶部的元素:

见http://jsfiddle.net/7aeDt/

如您所见,当您将元素悬停在顶部时,后面的元素将被激活.有关此属性的更多信息:https://developer.mozilla.org/en/CSS/pointer-events

例如:

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;
}

CSS

  <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>


    

Answer 2

此外,人们可能会发现有用的东西是你可以通过将指针事件设置为指针事件:auto explicit来重新启用指针事件:无元素的子元素上的指针事件.这似乎没有很好的记录,结果证明是非常有用的. - slicestoad

@ slicedtoad的评论对我来说非常有用,所以我认为它值得一个完整的答案.如果您设置pointer-events: none为父级,则会为其子级禁用事件.但是,如果你设置point-events: auto了孩子,他们将再次工作.

这也适用于孩子们有负面因素z-index,因此对指针事件没有反应.