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

Question

所以我目前在页面上有多个图像，但是当我想要悬停在悬停的图像上时。如果页面有超过12个图像，一种方法是使用id复制此代码12次，但是有更有效的方法：

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

Answer 1

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

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

但请注意，如果您的目标只是将转换应用于这些图片，则可以仅使用带有伪类:hover的CSS来完成。

Answer 2

要仅对当前悬停的图像应用悬停效果而不对其他图像应用悬停效果，请使用$(this)，如下所示： -

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