0

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

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

谢谢

4

4 回答 4

1

您需要.hover在 jquery 中使用该函数。这使您可以专门针对您悬停的项目。与上面的答案不同，您不需要使用该.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类来完成

于 2013-10-23T14:02:06.497 回答
0

您应该在 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 选择器来构建更精确的查询

于 2013-10-23T13:52:44.387 回答
0

多一点上下文会有所帮助，但是您尝试过 toggleClass 吗？

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

顺便说一句，$(this) 已经针对触发元素，不应更改具有相同类名的其他元素。

于 2013-10-23T13:53:15.973 回答
0

我不完全确定你的上下文，但你应该能够'.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()and合并addClass()到同一行，因为不需要重新识别选择器，使用 jQuery 可以堆叠函数。

于 2013-10-23T13:58:40.570 回答