使用jQuery,我可以定位一个元素,只有在父元素悬停时才显示其子元素吗？

Question

好的,所以我目前正在处理一个页面,其中有两个元素,父母和孩子.

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

我想要的是在父元素悬停时显示子元素.所以我在jQuery中创建了一个函数,让我能够做到这一点.

function icondisplay(parentId){

 $(parentId).mouseenter(function() {

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

$(hover).mouseleave(function() {

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

    });

}

我遇到的问题是页面中有多个父节点具有不同的ID,但子元素都是相同的类.因此,当我将鼠标悬停在任何父元素上时,会立即显示所有子元素.如何只在父显示中创建子元素,而不通过并给每个子元素一个唯一的类/ id然后更改我的函数？

谢谢

Answer 1

不要使用jQuery,使用CSS.

.child {
    display: none;
}
*:hover > .child {
    display: inline;
}

我不愿意添加这个,因为CSS方法更有意义,但我们走了:如果你必须使用jQuery,请使用:has( > .child):

$("div:has(> .child)").hover(function()
    $("> .child", this).show();
}, function() {
    $("> .child", this).hide();
});

Answer 2

您只需要更改选择父项的方式,然后选择子项:

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