jquery - Target 与多个元素具有相同类名的单个元素

Question

我正在尝试实现悬停效果，该效果针对单个元素但具有类名作为多个元素。例如，我只希望当您将鼠标悬停在该特定元素上时发生悬停效果。但是，如果我将鼠标悬停在其余元素上，代码就可以工作，这就是我目前所拥有的......

$(".thumb-overlay-content").hover(function() {
    $(this).parent('.thumb-overlay-desc').removeClass('animated rotateOut');
    $(this).parent('.thumb-overlay-desc').addClass('animated rotateIn');
}, function() {
    $(this).parent('.thumb-overlay-desc').removeClass('animated rotateIn');
    $(this).parent('.thumb-overlay-desc').addClass('animated rotateOut');
});

谢谢

Answer 1

你需要使用jquery中的.hover函数。这使您可以专门针对您悬停的元素。与上面的答案不同，您不需要使用 .parent 函数。

$(".thumb-overlay-content").hover(function() {
    $(this).removeClass('rotateOut').addClass('rotateIn');
}, function() {
    $(this).removeClass('rotateIn').addClass('rotateOut');
});

此外，如果您只是想立即将其添加回去，则无需删除 .animated 类。

查看工作 jsfiddle

另一方面，我不确定是否需要 jquery，如果您调整 CSS，它可以通过一个简单的 .thumb-overlay-content:hover class