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 的效果消失了。

Answer 1

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

关键是它必须是图像和新元素(阅读更多链接)的父级。

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

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

http://jsfiddle.net/wNTzV/1/

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

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

你也可以看看这个问题: Changing the child element's CSS when the parent is hovered with jQuery