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');
});