CSS-悬停通过元素来激活覆盖元素上的悬停

  • Z时代
  • 2024-01-10
  • 分类：问答

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

元素之一仅包含文本，它悬停在许多其他事物之上。

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

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

有没有什么样式的元素，以便它允许悬停通过它传递给下面的任何元素？

使用JavaScript并不是很难，但是为了使事情尽可能简单，我目前不愿意这样做。稍后我将使JavaScript复杂化。

谢谢

PS-我已经在使用HTML5和CSS3，因此使用这些较新标准的解决方案没有问题。

回答：

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

如您所见，当您将元素悬停在顶部时，后面的元素将被激活。

以上是 CSS-悬停通过元素来激活覆盖元素上的悬停 的全部内容， 来源链接： utcz.com/qa/397302.html

回到顶部