Question

我的鼠标悬停功能在我的图像上有轻微问题。当您将鼠标悬停在一个图像上时，会导致悬停状态与所有图像一起处于活动状态。 [点击这里] [1]有谁知道我哪里出错了？

// java描述

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

在许多面向对象的编程语言中，这个（或者自我）是一个可以在实例方法中使用的关键字来引用该对象已调用当前正在执行的方法。

Answer 3

找到与该图像对应的div：

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

Jquery鼠标悬停问题

3 个答案: