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

Question

我的页面布局涉及很多位置绝对和z索引，因此有很多元素相互重叠。

其中一个元素只包含文本，并且它悬停在许多其他内容之上。

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

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

是否有任何方法可以对元素进行样式设置，以便悬停将其传递给下面的任何元素？

对于JavaScript来说这不会太难，但我现在不想走那条路，以保持事情尽可能简单。我以后会用JavaScript来复杂化。

由于

P.S。 - 我已经使用HTML5和CSS3了，所以使用这些新标准的解决方案没问题。

Answer 1

您可以将pointer-events: none;用于顶部的元素：

请参阅http://jsfiddle.net/7aeDt/

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

示例：

<div> on top of all: hover me </div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

CSS

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

Answer 2

  

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

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

当孩子们有负z-index时，这也适用，因此对指针事件没有反应。

Answer 3

这是问题不需要的 Javascript 解决方案，但此页面与此类悬停问题搜索查询相关联：

我有一个案例，这个箭头按钮位于一个项目的顶部，我想保持悬停在灰色。更具体地说，该项目位于项目列表中，当鼠标悬停在这些项目的顶部时，每个项目的顶部都会出现各种按钮。

对于 jQuery 事件：

var selectedItem;
var lastSelectedItem;

$(".item").mouseover(function(){
  $(this).addClass("item-hovered")       // css class with hover styles
  selectedItem = $(this);
});
$(".item").mouseleave(function(){
  $(this).removeClass("item-hovered")
  selectedItem = null;
  lastSelectedItem = $(this);
});

$(".button").mouseover(function(){
  selectedItem = lastSelectedItem;
  selectedItem.addClass("item-hovered")
});

"lastSelectedItem" 用于区分将项目移到空白处和将项目移到按钮上，因此 selectedItem 仅在鼠标悬停在项目或其相应按钮上时才保留值。