CSS - 悬停穿过元素以激活悬停在被覆盖的元素上答案

【问题标题】：CSS - Hover passes through elements to activate hover on covered elementCSS - 悬停穿过元素以激活悬停在被覆盖的元素上
【发布时间】：2012-03-16 14:20:29
【问题描述】：

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

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

在该元素下方有几个应用了 CSS 悬停伪类的元素。

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

有什么方法可以设置一个元素的样式，这样它就可以让悬停通过它到达下面的任何元素？

这对 JavaScript 来说不会太难，但我现在不想走那条路，以使事情尽可能简单。稍后我会用 JavaScript 使事情变得足够复杂。

谢谢

附： - 我已经在使用 HTML5 和 CSS3，所以我对使用这些新标准的解决方案没有任何问题。

【问题讨论】：

您真的需要将文本框放在您想要添加悬停类的框的顶部吗？

标签： html css

【解决方案1】：

您可以使用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>

如您所见，当您将元素悬停在顶部时，后面的元素被激活。欲知更多详情：https://developer.mozilla.org/en/CSS/pointer-events

【讨论】：

甜蜜！ - 指针事件：无；正是我想要的。
注意；这也会阻止元素上的 JavaScript 事件绑定。
另外，人们可能会发现有用的是，您可以通过将 pointer-events:none 元素的 子元素 明确设置为 pointer-events:auto 来重新启用指针事件。这似乎没有很好的记录，结果证明非常有用。
jsfiddle.net/7aeDt/87 您可能还必须显式地为子级添加一个侦听器。不确定。
有没有办法同时触发两个 div:hover 效果？

【解决方案2】：

此外，人们可能会发现有用的一点是，您可以通过将 pointer-events:none 元素的子元素显式设置为 pointer-events:auto 来重新启用指针事件。这似乎没有很好的记录，结果证明非常有用。 – 切片蟾蜍

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

这也适用于孩子有一个否定的z-index，因此对指针事件没有响应。

【讨论】：

【解决方案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 仅在鼠标悬停在项目或其相应按钮上时才保存值。

【讨论】：