gpt4 book ai didi

javascript - 使用 jQuery,我能否定位一个元素以仅在父元素悬停时显示其子元素?

转载 作者:行者123 更新时间:2023-11-28 03:56:44 25 4
gpt4 key购买 nike

好的,我目前正在处理一个包含两个元素的页面,父元素和子元素。

<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 然后改变我的功能?

谢谢

最佳答案

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

关于javascript - 使用 jQuery,我能否定位一个元素以仅在父元素悬停时显示其子元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7002441/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com