javascript - 在 jquery 中正确使用 $(this)

Question

    $(".gear_listing").hover(function(){

            $(".overlay_gears").show();
        },function(){
   $(".overlay_gears").hide();
}
    );

上面是我的 jquery 代码，正如你想象的那样，当 .gear_listing div 悬停时我试图显示 .overlay_gears div，上面的代码工作得很好。问题是我有很多 .gear_listing div 和很多...这个)。我只是不知道如何。

我试过这样做:

    $(".gear_listing").hover(function(){
        var this=$(this);
            this.$(".overlay_gears").show();
        },function(){
   this.$(".overlay_gears").hide();
}
    );

它不工作

下面是我的div结构:

               <li>
                    <a href="#">
                        <div class="gear_listing relative">

                            <div class="overlay_gears absolute"></div>
                            <div class="gear_description absolute">
                                <span>afdfdsfds sfd</span>
                            </div>

                            <img src="images/list_one.jpg">
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <div class="gear_listing relative">
                            <div class="overlay_gears absolute"></div>
                            <div class="gear_description absolute">
                                <span>afdfdsfds sfd</span>
                            </div>
                            <img src="images/list_two.jpg">
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <div class="gear_listing relative">
                            <div class="overlay_gears absolute"></div>
                            <div class="gear_description absolute">
                                <span>afdfdsfds sfd</span>
                            </div>
                            <img src="images/list_three.jpg">
                        </div>
                    </a>
                </li>

Answer 1

.overlay_gears 是 .gear_listing 的子级，所以这样使用

$(".gear_listing").hover(function(){
    $(this).children(".overlay_gears").fadeIn();
},function(){
    $(this).children(".overlay_gears").fadeOut();
});