css - 在下层保持悬停效果

Question

即使在图像上显示了新图层，是否可以在图像上保持 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 的效果会丢失。

score 0 · Accepted Answer

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

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

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

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

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

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

1 回答 1