如果被另一个元素覆盖，则响应 CSS 悬停选择器
Posted
技术标签:
【中文标题】如果被另一个元素覆盖，则响应 CSS 悬停选择器【英文标题】：Respond to CSS hover selector if covered by another element 【发布时间】：2020-01-11 05:47:24 【问题描述】：我知道我可以禁用覆盖元素上的指针事件，但我不想这样做。我希望覆盖元素和被覆盖元素都响应鼠标事件，以便当鼠标指针同时触摸它们时它们都转换到与悬停选择器对应的状态。
【问题讨论】：
【参考方案1】：您可以在要跟踪悬停的 DOM 元素周围定义一个父容器。 This *** thread 展示了一种简单的方法，其父 div 具有类“section”。它包含两个在悬停时都应该有边框的元素（代码 sn-p 引用自 this answer post）：
<html>
<style type="text/css">
.section background:#ccc;
.layer background:#ddd;
.section:hover img border:2px solid #333;
.section:hover .layer border:2px solid #F90;
</style>
</head>
<body>
<div class="section">
<img src="myImage.jpg" />
<div class="layer">Lorem Ipsum</div>
</div>
</body>
</html>【讨论】：
以上是关于如果被另一个元素覆盖，则响应 CSS 悬停选择器的主要内容，如果未能解决你的问题，请参考以下文章
jQuery设置另一个项目的css“颜色”元素覆盖了它的悬停伪类