Jquery悬停选择不起作用

Jquery hover selection not working

本文关键字：不起作用 选择 悬停 Jquery      更新时间：2023-09-26

我有一个库，其中包含10个具有相同类的图像。我想使用jquery和css3分别为每个图像使用悬停效果。我使用了一种方法来选择图像和应用动画。但如果我将鼠标悬停在一个图像上，我已经看到动画效果应用于所有图像。

我的主DIV id名称#continer和所有图像id #image_id

$("#image_id").hover(function () {
    $("#image_id").addClass("start_animation")
});

问题是id必须是唯一的。相反，您需要为每个图像选择类名。或者，您可以使用父级并从中选择img标记：

$('#container').on('mousein', 'img', function(){
    $(this).addClass('start_animation');
});

在上面的示例中，我在#container上使用了一个事件委派mouseover，它将自动将此事件应用于img选择器。

现在，hover()函数通常为mousein/mouseout事件获取2个函数参数。因此，要在mouseout之后去掉该类，还必须绑定该事件。

$('#container').on('mouseout', 'img', function(){
    $(this).removeClass('start_animation');
});

$("#image_id").hover(function () {
 $(this).addClass("start_animation")
});

试试上面的代码。

正确的方法：

$("#container").hover(function (e) {
 $(e.target).addClass("start_animation")
});
相关文章：