Question

I am trying to show/hide the child class when parent is hovered. I have multiple class set like in Jquery $(this) Child Selector.

for some unknown reason it is not working.

What I have is

<div class="parentitem">
    <div class="childitem">
    </div>
</div>

Also

$("div.childitem").css({visibility: "hidden"});

$("div.parentitem").mouseenter(function(){
    $("div.childitem").css({visibility: "visible"});
});

$("div.parentitem").mouseleave(function(){
    $("div.childitem").css({visibility: "hidden"});
});

This works but all the children are affected. What I wanted is to affect only particular div and its child

I tried to use

$(this).children("div.childitem").css({visibility: "visible"});

$(this).parent().children("div.childitem").css({visibility: "visible"});

$(this).next("div.childitem").css({visibility: "visible"});

None of this is working for some reason.

Can somebody point me where I went wrong.

Thanks

Deepak

Answer 1

Try:

$("div.childitem").css({visibility: "hidden"});

$("div.parentitem").mouseenter(function(){
    $(this).find('.childitem').css({visibility: 'visible'});
});

$("div.parentitem").mouseleave(function(){
    $(this).find('.childitem').css({visibility: 'hidden'});
});

JS Fiddle demo.