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

Having multiple image with same hover over effects

本文关键字：图像 悬停      更新时间：2023-12-26

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

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

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

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

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

为了只在当前悬停的图像上而不在其他图像上应用悬停效果，请使用$(this)，如下所示：-

$("img").hover(function () {
    $(this).addClass("transition");
}, function () {
    $(this).removeClass("transition");
});
相关文章：