使用 jQuery，我可以定位一个元素以仅在父元素悬停时显示其子元素吗？答案

【问题标题】：Using jQuery, can I target an element to show its child element only when the parent element is being hovered over?使用 jQuery，我可以定位一个元素以仅在父元素悬停时显示其子元素吗？
【发布时间】：2011-08-10 04:33:50
【问题描述】：

好的，我目前正在处理一个页面，其中有两个元素，父元素和子元素。

<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，然后更改我的功能？

谢谢

【问题讨论】：

标签： javascript jquery html css

【解决方案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();
});

【讨论】：

是的，比使用 jquery 更好的解决方案！
我认为你需要担心那里的兼容性，IE是否支持CSS子选择器？
@Andrew - 如果您的用户使用的是 IE6，那么您是对的 - 您不能使用子选择器。在这种情况下，你应该给所有的父母一个共同的班级，并依靠通常的后代选择器。但除非中国是您的目标人群，否则不要支持 IE6。
@gilly3 我完全同意。在回答这些问题时，我只是倾向于谨慎行事，因为它并不总是说明所支持的内容，而且我不想给出一个不起作用的答案。

【解决方案2】：

您只需要更改选择父母然后选择孩子的方式：

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

【讨论】：

【解决方案3】：

我会假设这样的事情：http://jsfiddle.net/ex2nJ/1/ 会解决你的问题。对于$("div")，您只需输入您的函数即可找到任何父 ID。但是，您甚至可能不需要。

【讨论】：

感谢您的提琴。当有小提琴时，总是让我更容易理解答案。

【解决方案4】：

您可以使用 CSS 来做到这一点。假设 HTML 类似于：

<div class="parent">
    <div class="child"></div>
</div>

你可以这样做：

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

【讨论】：

【解决方案5】：

http://api.jquery.com/child-selector/

$(parentId).mouseenter(function(){
    $(parentId > '.child').show();
});

【讨论】：

【解决方案6】：

可以的

$(this).find('.child')

或

$('.child', this)

【讨论】：

【解决方案7】：

像下面这样改

 $(parentId).mouseenter(function() {

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

【讨论】：

【解决方案8】：

当然可以

$('#parent').hover(function(){
    $(this).children().show();
},function(){
    $(this).children().hide(); 
});

http://jsfiddle.net/NkAnR/

并确保修复您的结束 ~~span~~</class> 标记

【讨论】：