javascript - 拥有多个具有相同悬停效果的图像

Question

所以我目前在一个页面上有多个图像，但是当我想在悬停的图像上产生悬停效果时。如果页面有超过 12 张图片，一种方法是将这段代码复制 12 次，使用一个 id 但有没有更有效的方法:

$("img").hover(function () {
    $("img").addClass("transition");
}, function () {
    $("img").removeClass("transition");
});

Answer 1

您可以使用 in/out 悬停处理程序来切换类:

$("img").hover(function () {
    $(this).toggleClass("transition");
});

但请注意，如果您的目标只是将过渡应用到这些图像，这可以仅使用带有伪类 :hover 的 CSS 来完成。