Jquery 目标元素与多个元素具有相同的类名

我试图实现悬停效果，它以单个元素为目标，但类名为多个元素。例如，我只希望当您将鼠标悬停在特定元素上时，会出现悬停效果。但是如果我将鼠标悬停在其余的元素上，代码就可以工作了，这就是我到目前为止得到的

$(".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');
});

---

谢谢

您应该在jQuery中使用标识符或更精确的查询

将

id

属性添加到对象中，然后：

$("#myIdName").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');
});

---

看看r，构建一个更精确的查询

多一点上下文可能会有所帮助，但您是否尝试过切换类

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

---

顺便说一句，$（这）已经以触发元素为目标，具有相同类名的其他元素不应更改。

我不完全确定您的上下文，但您应该能够从

父函数中删除
'.thumb overlay desc'

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

我也不完全确定你的问题，看到它的实际行动会有所帮助。但是试试这个：

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

我还将
removeClass（）
和
addClass（）
组合到同一行，因为不需要重新标识选择器，使用jQuery可以堆叠函数。
您需要在jQuery中使用
.hover
函数。这允许您专门针对您悬停的项目。与上面的答案不同，您不需要使用
.parent
功能

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

另外，如果要立即将
.animated
类添加回，则无需删除该类

查看正在工作的

另一方面，我不确定是否需要jquery，如果您调整CSS，它可以通过一个简单的
来完成。thumb overlay content:hover
class
您需要一种选择特定元素的方法。。给它另一个类，一个id，或者通过索引选择它……是否有一个原因让你不能单独使用CSS来完成这项任务：
。thumb overlay content:hover
你必须为父元素添加另一个属性，才能知道它是什么。F.e.数据id，或只是id…和链接调用/缓存。您还可以更具体地使用您的类，以便只需使用
toggleClass
添加/删除单个类即可获得相同的效果