在jquery中正确使用$(this)

Question

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

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

上面是我的jquery代码,你可以想象我试图显示.overlay_gears div当.gear_listing div悬停时,上面的代码工作正常.问题是我有很多.gear_listing div和许多.overlay_gears div当我将鼠标悬停在任何名为.gear_listing的div上时,显示所有.overlay_gears div,我不想要.我只想在.gear_listing div.i下显示.overlay_gears div.我知道我必须使用$(this).我只是不知道如何.

我试过这样做:

    $(".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

使用.find()和.slideToggle()用于动画效果或使用.fadeToggle()

$(".gear_listing").hover(function() {
  $(this).find(".overlay_gears").stop().slideToggle();
});

要么

$(".gear_listing").hover(function() {
  $(this).find(".overlay_gears").stop().fadeToggle();
});

小提琴

Answer 2

.overlay_gears是.gear_listing这样使用的孩子

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