Question

Ok, here’s what I’m trying to do. I have a DIV box with a child element set with DISPLAY: NONE;. I’m trying to use Jquery so that when the mouse enters the parent DIV box, the child element is made visible, and then hides when the mouse leaves the parent DV. There will be multiple divs on the page with these classes. For some reason it’s not working. Any ideas? Here’s my code:

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

Use find instead:

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

Or even better, try this:

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