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

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

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

---

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

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

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

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

---

但是要注意,，如果您的目标仅仅是将转换应用于这些图像，那么可以仅使用CSS和pseudo class:hover来完成此操作。

如果改用$img，如何。hover我使用div，但仍然希望对div内的图像产生效果，因为div内可能有我想要的相同文本effect@jsg...as到目前为止，我明白了你想说的……你想说什么div a悬停效果中的图像。。。因此，在这种情况下，可以使用$'div img'作为选择器。