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效果会丢失。

Answer 1

您可以将悬停附加到父节点，或者如果您需要更多地约束它，请为此创建一个新的div。

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

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

很可能您的“阅读更多”链接是作为不同子树的一部分创建的。由于它们处于同一级别，因此：悬停样式适用于Image，并且仅适用于树中较低的DOM节点（在此示例中，不执行任何操作）。

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

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