当父母被jQuery占用时，更改子元素的CSS
首先，我假设这对于CSS3来说太复杂了，但是如果在那里有一个解决scheme的话，我很乐意去做。
HTML非常简单。
<div class="parent"> <div class="child"> Text Block 1 </div> </div> <div class="parent"> <div class="child"> Text Block 2 </div> </div> 子div被设置为显示：无; 默认情况下，但是然后改变显示：block; 当鼠标hover在父div上时。 问题是，这个标记出现在我的网站上的几个地方，我只希望孩子被显示，如果鼠标是它的父母，而不是如果鼠标结束任何其他父母（他们都有相同的类名字和没有ID）。
我试过使用$(this)和.children()无济于事。
$('.parent').hover(function(){ $(this).children('.child').css("display","block"); }, function() { $(this).children('.child').css("display","none"); });
为什么不使用CSS？
.parent:hover .child, .parent.hover .child { display: block; }
然后为IE6添加JS（例如在一个条件注释中）不支持：正确hover：
jQuery('.parent').hover(function () { jQuery(this).addClass('hover'); }, function () { jQuery(this).removeClass('hover'); });
这是一个简单的例子： 小提琴
不需要使用JavaScript或jQuery，CSS就足够了：
.child{ display:none; } .parent:hover .child{ display:block; }
看DEMO
使用toggleClass() 。
$('.parent').hover(function(){ $(this).find('.child').toggleClass('color') });
那里的color是class级。 您可以根据自己的喜好devise风格，以实现您想要的行为。 该示例演示了如何在鼠标进出时添加和删除类。
检查工作示例在这里 。
.parent:hover > .child { /*do anything with this child*/ }
我认为这是一个更好的解决scheme，因为它可以扩展到更多的层次，而不仅仅是想要的，不只是两三个。
我使用边框，但也可以用无论什么风格，像背景颜色。
有了边界，这个想法是：
- 有一个不同的边框颜色只有一个div，div在鼠标所在的位置，而不是在任何父母，不在任何孩子，所以只能看到这样的div边框在不同的颜色，而其余的保持白色。
你可以在http://jsbin.com/ubiyo3/13进行testing
这里是代码：
<!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>
斯蒂芬的答案是正确的，但这是我对他的回答的改编：
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
.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的
//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'); });
你可以在jsFiddle上看到这个例子。
如果您使用Twitter Bootstrap样式和基本JS作为下拉菜单：
.child{ display:none; } .parent:hover .child{ display:block; }
这是创build粘性下拉菜单（这不是烦人的）
- 行为是：
- 单击时保持打开状态，当再次单击页面上的其他任何位置时closures
- 当鼠标滚动出菜单的元素时自动closures。
要改变它从CSS你甚至不需要设置子类
.parent > div:nth-child(1) { display:none; } .parent:hover > div:nth-child(1) { display: block; }
