Question

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

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

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

Answer 1

如评论中所述，您可以使用事件处理程序执行此操作：

$(".square").hover(function(){
    $(this).addClass("hover");
}, function(){
    $(this).removeClass("hover");
})

将您的第一张图片初始化为＆＃34; hover＆＃34; class并且不使用native css：hover pseudo class

Answer 2

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

不是在第一个项目上使用伪类:hover，而是可以在标记中或通过jQuery为它提供真正的类，例如.active，并使样式与:hover。然后在该类悬停一次时移除该类。

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");
    });
});