jQuery 当父元素悬停时更改子元素的 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5061940/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing the child element's CSS when the parent is hovered
提问by Hartley Brody
First of all, I'm assuming this is too complex for CSS3, but if there's a solution in there somewhere, I'd love to go with that instead.
首先，我假设这对于 CSS3 来说太复杂了，但是如果某个地方有解决方案，我很乐意改用它。
The HTML is pretty straightforward.
HTML 非常简单。
<div class="parent">
<div class="child">
Text Block 1
</div>
</div>
<div class="parent">
<div class="child">
Text Block 2
</div>
</div>
The child div is set to display:none; by default, but then changes to display:block; when the mouse is hovered over the parent div. The problem is that this markup appears in several places on my site, and I only want the child to be displayed if the mouse is over it's parent, and not if the mouse is over any of the other parents (they all have the same class name and no IDs).
子 div 设置为 display:none; 默认情况下，但随后更改为 display:block; 当鼠标悬停在父 div 上时。问题是这个标记出现在我网站上的几个地方，我只希望在鼠标悬停在它的父级上时显示子级，而不是在鼠标悬停在任何其他父级上时显示（它们都具有相同的类）姓名，没有身）。
I've tried using $(this)and .children()to no avail.
我已经尝试使用$(this)，并.children()无济于事。
$('.parent').hover(function(){
$(this).children('.child').css("display","block");
}, function() {
$(this).children('.child').css("display","none");
});
回答by Stephen
Why not just use CSS?
为什么不直接使用 CSS？
.parent:hover .child, .parent.hover .child { display: block; }
and then add JS for IE6 (inside a conditional comment for instance) which doesn't support :hover properly:
然后为不支持 :hover 的 IE6 添加 JS（例如在条件注释中）：
jQuery('.parent').hover(function () {
jQuery(this).addClass('hover');
}, function () {
jQuery(this).removeClass('hover');
});
Here's a quick example: Fiddle
这是一个快速示例：Fiddle
回答by Ali Adravi
回答by Hussein
Use toggleClass().
使用toggleClass().
$('.parent').hover(function(){
$(this).find('.child').toggleClass('color')
});
where coloris the class. You can style the class as you like to achieve the behavior you want. The example demonstrates how class is added and removed upon mouse in and out.
color班级在哪里。您可以根据自己的喜好设置类的样式，以实现您想要的行为。该示例演示了如何在鼠标进出时添加和删除类。
Check Working example here.
在此处检查工作示例。
回答by Amir Rahman
.parent:hover > .child {
/*do anything with this child*/
}
回答by Roger Roelofs
Stephen's answeris correct but here's my adaptation of his answer:
斯蒂芬的回答是正确的，但这是我对他回答的改编：
HTML
HTML
<div class="parent">
<p> parent 1 </p>
<div class="child">
Text Block 1
</div>
</div>
<div class="parent">
<p> parent 2 </p>
<div class="child">
Text Block 2
</div>
</div>
CSS
CSS
.parent { width: 100px; min-height: 100px; color: red; }
.child { width: 50px; min-height: 20px; color: blue; display: none; }
.parent:hover .child, .parent.hover .child { display: block; }
jQuery
jQuery
//this is only necessary for IE and should be in a conditional comment
jQuery('.parent').hover(function () {
jQuery(this).addClass('hover');
}, function () {
jQuery(this).removeClass('hover');
});
You can see this example working over at jsFiddle.
你可以在 jsFiddle看到这个例子。
回答by z666zz666z
I have what i think is a better solution, since it is scalable to more levels, as many as wanted, not only two or three.
我有我认为更好的解决方案，因为它可以扩展到更多级别，需要多少就多少，而不仅仅是两个或三个。
I use borders, but it can also be done with whateever style wanted, like background-color.
我使用边框，但也可以使用任何想要的样式来完成，比如背景颜色。
With the border, the idea is to:
有了边界，想法是：
- Have a different border color only one div, the div over where the mouse is, not on any parent, not on any child, so it can be seen only such div border in a different color while the rest stays on white.
- 只有一个 div 有不同的边框颜色，鼠标所在位置的 div 不在任何父级上，不在任何子级上，因此只能看到不同颜色的 div 边框，而其余部分保持白色。
You can test it at: http://jsbin.com/ubiyo3/13
您可以在以下位置进行测试：http: //jsbin.com/ubiyo3/13
And here is the code:
这是代码：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Hierarchie Borders MarkUp</title>
<style>
.parent { display: block; position: relative; z-index: 0;
height: auto; width: auto; padding: 25px;
}
.parent-bg { display: block; height: 100%; width: 100%;
position: absolute; top: 0px; left: 0px;
border: 1px solid white; z-index: 0;
}
.parent-bg:hover { border: 1px solid red; }
.child { display: block; position: relative; z-index: 1;
height: auto; width: auto; padding: 25px;
}
.child-bg { display: block; height: 100%; width: 100%;
position: absolute; top: 0px; left: 0px;
border: 1px solid white; z-index: 0;
}
.child-bg:hover { border: 1px solid red; }
.grandson { display: block; position: relative; z-index: 2;
height: auto; width: auto; padding: 25px;
}
.grandson-bg { display: block; height: 100%; width: 100%;
position: absolute; top: 0px; left: 0px;
border: 1px solid white; z-index: 0;
}
.grandson-bg:hover { border: 1px solid red; }
</style>
</head>
<body>
<div class="parent">
Parent
<div class="child">
Child
<div class="grandson">
Grandson
<div class="grandson-bg"></div>
</div>
<div class="child-bg"></div>
</div>
<div class="parent-bg"></div>
</div>
</body>
</html>
回答by R Tobin
If you're using Twitter Bootstrapstyling and base JS for a drop down menu:
如果您使用Twitter Bootstrap样式和基础 JS 作为下拉菜单：
.child{ display:none; }
.parent:hover .child{ display:block; }
This is the missing piece to create sticky-dropdowns (that aren't annoying)
这是创建粘性下拉列表的缺失部分（并不烦人）
- The behavior is to:
- Stay open when clicked, close when clicking again anywhere else on the page
- Close automatically when the mouse scrolls out of the menu's elements.
- 行为是：
- 单击时保持打开状态，再次单击页面上的其他任何位置时关闭
- 当鼠标滚出菜单元素时自动关闭。
回答by Brian Leishman
Not sure if there's terrible reasons to do this or not, but it seems to work with me on the latest version of Chrome/Firefox without any visible performance problems with quite a lot of elements on the page.
不确定这样做是否有可怕的理由，但它似乎在最新版本的 Chrome/Firefox 上与我合作，没有任何明显的性能问题，页面上有很多元素。
*:not(:hover)>.parent-hover-show{
display:none;
}
But this way, all you need is to apply parent-hover-showto an element and the rest is taken care of, and you can keep whatever default display type you want without it always being "block" or making multiple classes for each type.
但是这样，您所需要的只是应用parent-hover-show到一个元素，其余的都可以处理，您可以保留任何您想要的默认显示类型，而不会总是“阻塞”或为每种类型创建多个类。
回答by hamboy75
To change it from css you dont even need to set the child class
要从 css 更改它，您甚至不需要设置子类
.parent > div:nth-child(1) { display:none; }
.parent:hover > div:nth-child(1) { display: block; }
