javascript - 如何设置:hover as default and reset once moused over?

Question

我目前正在开发一个包含两列方形图片的网站。每列有 3 张图像，因此总共有 6 张图像。每个图像都有一个带有文本的悬停状态和一个“了解更多”链接。

目的是让用户将鼠标悬停在每张图片上以了解有关客户公司的更多信息。为了帮助方便用户将鼠标悬停在图像上，我试图强制第一张图像将其悬停状态作为默认 View 。如果将鼠标悬停在它上面，一旦鼠标离开，它就会重置为纯图像，并恢复正常的悬停功能。

如果可能，实现这种效果的最佳方法是什么？

Answer 1

如果可以使用 jQuery，请继续阅读。

除了在第一项上使用伪类 :hover 之外，您还可以在标记中或通过 jQuery 为它提供一个真实的类，例如 .active，并使样式与 :hover 完全相同。然后在悬停一次时删除那个类。

演示:http://jsfiddle.net/96mwjs0x/1/

HTML

<ul>
    <li>11111</li>
    <li>22222</li>
    <li>33333</li>
</ul>

CSS

li:hover,
li.active {
    color: red;
}

jQuery

$(function() {
    $("li:first-child").addClass("active")
    $(".active").mouseover(function() {
      $(this).removeClass("active");
    });
});