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

Ok so I'm currently working on a page where ill have two elements, the parent and the child.

好的，所以我正在制作一个页面，其中有两个元素，父母和孩子。

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

What I want is to have the child element displayed when the parent element is hovered over. So I created a function in jQuery that will let me do exactly that.

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

function icondisplay(parentId){

 $(parentId).mouseenter(function() {

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

$(hover).mouseleave(function() {

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

    });

}

The problem I'm having is that there are multiple parents within the page with different IDs, but the child elements are all the same class. So when I hover over any parent element, all of the child elements are displayed at once. How can I make only the child element within the parent display, without going through and giving each child element a unique class/id then changing my function?

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

Thank you

谢谢

8 个解决方案

#1

You simply need to change how you are selecting the parents and then selecting the childs:

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

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

#2

Don't use jQuery, use CSS.

不要使用jQuery，使用CSS。

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

I hesitate to add this, because the CSS approach makes so much more sense, but here we go: If you must use jQuery, use :has( > .child):

我不愿意添加这个，因为CSS方法更有意义，但是我们继续：如果你必须使用jQuery，请使用：has（> .child）：

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

#3

I would assume something like this: http://jsfiddle.net/ex2nJ/1/ would solve your problem. for $("div") you can just put in your function to find whatever parent ID. However, you may not even need to.

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

#4

You can do this with CSS. Assume HTML something like:

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

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

You can do:

你可以做：

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

#5

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

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

#6

that would do

那样做

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

要么

$('.child', this)

#7

Change it like that below

改变如下

 $(parentId).mouseenter(function() {

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

#8

Sure can

当然可以

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

http://jsfiddle.net/NkAnR/

And make sure to fix your closing ~~span~~</class> tag

并确保修复结束范围标记

#1