Jquery悬停选择不起作用

Question

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

我的主要DIV ID名称#continer和所有图片ID #image_id

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

Answer 1

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

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

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

现在，hover()函数通常为mousein / mouseout事件提供2个函数参数。因此，要在mouseout之后摆脱课程，你也必须绑定该事件。

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

Answer 2

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

尝试以上代码。

Answer 3

正确的方法：

$("#container").hover(function (e) {
 $(e.target).addClass("start_animation")
});