javascript - 使用 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();
});