Question

Ok so I’m currently working on a page where ill have two elements, the parent and the child.

<div id="parent">Hi 
<span class="child">Bye</class> 
</div>

What I want is to have the child element displayed when the parent element is hovered over. So I created a function in jQuery that will let me do exactly that.

function icondisplay(parentId){

 $(parentId).mouseenter(function() {

    $('.child').show();
});

$(hover).mouseleave(function() {

    $('.child').hide();

    });

}

The problem I’m having is that there are multiple parents within the page with different IDs, but the child elements are all the same class. So when I hover over any parent element, all of the child elements are displayed at once. How can I make only the child element within the parent display, without going through and giving each child element a unique class/id then changing my function?

Thank you

Answer 1

You simply need to change how you are selecting the parents and then selecting the childs:

$('.parentElement').hover(function()
{
    $(this).find('.child').show();
}, function()
{
    $(this).find('.child').hide();
});