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

Answer 3

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

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

你可以这样做：

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

Answer 4

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

Answer 5

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

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

Answer 6

会做什么

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

或

$('.child', this)

Answer 7

如下所示更改

 $(parentId).mouseenter(function() {

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

Answer 8

当然可以

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

http://jsfiddle.net/NkAnR/

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

使用jQuery，我可以将元素作为目标，仅在父元素悬停时显示其子元素吗？

8 个答案: