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

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