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

一尘不染

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

css

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

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

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

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

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

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

谢谢

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

阅读 356

2020-05-16

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

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

2020-05-16