jQuery鼠标悬停问题

Question

我在图像上的鼠标悬停功能有一个小问题。 当您将鼠标悬停在一张图像上时，会导致所有图像都处于悬停状态。 [单击此处] [1]有人知道我错了吗？

// javascript

$(".tint").hover(function(){
$('.hover-hide').toggleClass('hidden');
}); 

// HTML

<figure class="tint">
    <div class="hover-content hover-hide hidden">
        <a class="roll-over" href="#"><img class="img_hover" src="img/home-hover-bg.png" alt="hover"/></a>
    </div>
    </figure>

Answer 1

$(".tint").hover(function(){
    $(this).find('.hover-hide').toggleClass('hidden');
}); 

Answer 2

使用this来指向您要悬停的元素。

$(".tint").hover(function(){
     $(this).find('.hover-hide').toggleClass('hidden');
});

在许多面向对象的编程语言中，此（或self）是关键字，可以在实例方法中使用它来引用在其上调用了当前正在执行的方法的对象。

Answer 3

查找与该图像对应的div：

$(".tint").hover(function(){
    $(this).children('.hover-hide').toggleClass('hidden');
});