javascript - 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');
});

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

现在，hover() 函数通常为 mousein/mouseout 事件采用 2 个函数参数。因此，要在 mouseout 之后删除该类，您还必须绑定(bind)该事件。

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