jquery - 使用 Jquery 更改悬停时的不同类显示

Question

好的，这就是我正在尝试做的事情。我有一个 DIV 框，其子元素设置为 DISPLAY: NONE;。我正在尝试使用 Jquery，以便当鼠标进入父 DIV 框时，子元素可见，然后在鼠标离开父 DV 时隐藏。页面上将有多个包含这些类的 div。由于某种原因它不起作用。有任何想法吗？这是我的代码:

HTML:

<div class="parent">  
     <span class="handle" style="display: none;">My Handle</span>
     <p>Child Text</p>
</div>

Javascript:

$(document).ready(function () {
    $('.parent').mouseenter(function(){
        $(this).next('.handle').show();
    });
    $('.parent').mouseleave(function(){
        $(this).next('.handle').hide();
    });
})

Answer 1

使用查找来代替:

$(document).ready(function () {
    $('.parent').mouseenter(function(){
        $(this).find('.handle').show();
    });
    $('.parent').mouseleave(function(){
        $(this).find('.handle').hide();
    });
})

或者更好，试试这个:

$(document).ready(function () {
    $('.parent').hover(function(){
        $('.handle', this).show();
    },
    function(){
        $('.handle', this).hide();
     });
   );
})