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类来完成

Answer 2

您应该在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');
});

查看jQUery selecto r以构建更精确的查询

Answer 3

更多的上下文会有所帮助，但你尝试过toggleClass吗？

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

顺便说一句，$（this）已经定位了触发元素，不应该更改具有相同类名的其他元素。

Answer 4

我不完全确定您的上下文，但应该能够从'.thumb-overlay-desc'函数中移除parent()。

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

$(".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可以堆叠函数。

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

4 个答案: