Question

我有一个带有标题的图像容器，当我将鼠标悬停在它上面时，我打算将标题滑入，我正在使用jQuery slideToggle。这是代码......

<div class="image">
    <div class="caption">Caption Content</div>
</div>


$('.image').hover(function() {
    $('.image .caption').slideToggle('slow', function() {
    // Animation complete.
    });
});

这是一个有效的版本：http://jsfiddle.net/HZAHg/

......它完美无瑕。但是，我有多个实例，所以当我将鼠标悬停在其中一个上时，它们都会激活。我怎么做到这一点只有其中一个激活（我悬停的那个）？

感谢。

Answer 1

试试这个：

$('.image').hover(function() {
    $(".caption", this).slideToggle('slow', function() {
    // Animation complete.
    });
});

因为图像正在悬停，'this'指的是图像。如果在选择器中放入逗号后面的内容，则意味着只查看选择器的那组节点内部。所以我们在这里说“看看里面悬挂的'.image'节点（这个），然后寻找内部的.caption。”

希望这有帮助。

Answer 2

试试这个：

$('.image').hover(function() {
    $('.caption', this).slideToggle('slow', function() {
    // Animation complete.
}); });

Answer 3

试试这个：

$('.image').hover(function() {
    $('.caption', this).slideToggle('slow', function() {
        // Animation complete.
    });
});

Updated fiddle

只影响一个元素的一个实例来激活jQuery行为？

3 个答案: