我的页面布局涉及大量绝对位置和 z 索引,因此有很多元素彼此重叠。
其中一个元素仅包含文本,它悬停在许多其他内容之上。
在该元素下方有几个应用了 CSS 悬停伪类的元素。
当鼠标经过包含文本的元素时,我希望下面的元素以某种方式响应鼠标的存在并激活伪类样式。
有没有什么方法可以设置元素的样式,以便允许悬停穿过它到达下面的任何元素?
这对于 JavaScript 来说并不太难,但我现在不想走这条路,以便让事情尽可能简单。稍后我会用 JavaScript 让事情变得更加复杂。
Thanks
附: - 我已经在使用 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>
如您所见,当您将元素悬停在顶部时,后面的元素将被激活。有关此属性的更多信息:https://developer.mozilla.org/en/CSS/pointer-events https://developer.mozilla.org/en/CSS/pointer-events
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)