在下层保持悬停效果答案

【问题标题】：Keep hover effect on lower layer在下层保持悬停效果
【发布时间】：2013-11-16 21:52:01
【问题描述】：

是否可以在图像上保持 CSS 悬停效果，即使其上显示了新图层？

例如我有这个 CSS：

#rit{
background: url(images/rits.png) no-repeat;
height: 295px;
}

#rit:hover{
background: url(images/rits_h.png)  no-repeat;
height: 295px;
}

...然后是一些单独的 CSS，添加了“查看更多”按钮。当我将鼠标悬停在“阅读更多”按钮上时，上面 CSS 的效果会丢失。

【问题讨论】：

【解决方案1】：

您可以将 Hover 附加到父节点，或者如果您需要对其进行更多约束，请为此创建一个新的 div。

关键是它必须是图像和新项目的父项（阅读更多链接）。

DOM 是一个树形结构，任何适用于一层的东西都适用于所有较低的层（除非被覆盖），这包括“悬停”事件。这样做的原因是事件在树中向上发送。

您的阅读更多链接很可能是作为不同子树的一部分创建的，就像这样。由于它们处于同一级别，因此 :hover 样式适用于 Image，并且仅适用于树中较低的 DOM 节点（在此示例中，什么都没有）。

<div id="parent">
 <img ... />
  <a>Read More</a>
</div>

如果您将 :hover 样式附加到父级，它应该同时影响它们。

【讨论】：