Jquery $(this)子选择器因某些未知原因而无法正常工作

Question

当父母徘徊时,我试图显示/隐藏子类.我在Jquery $(this)Child Selector中有多个类集.

由于某种未知的原因,它无法正常工作.

我拥有的是什么

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

也

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

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

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

这有效但所有孩子都受到影响.我想要的只是影响特定的div及其孩子

我试着用

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

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

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

这些都不是出于某种原因.

有人能指出我哪里出错了.

谢谢

迪帕克

Answer 1

尝试:

$("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小提琴演示.