Css 如何应用子级：悬停而不是父级：悬停
在下面的html中，当我将鼠标悬停在child上时，父对象上会出现一个绿色背景。我怎样才能阻止这种事情发生？如果我在子元素之外悬停，我确实需要绿色背景 CSS3很好Css 如何应用子级：悬停而不是父级：悬停,css,hover,Css,Hover,在下面的html中，当我将鼠标悬停在child上时，父对象上会出现一个绿色背景。我怎样才能阻止这种事情发生？如果我在子元素之外悬停，我确实需要绿色背景 CSS3很好 .parent{ 填充：100px； 宽度：400px； 高度：400px； } .家长：悬停{ 背景颜色：绿色； } .孩子{ 填充：100px； 宽度：200px； 高度：200px； } .孩子：悬停{ 背景颜色：蓝色； } 小孩 最简单的方法可能是将JS用于这种CSS。也许您可以尝试重新考虑您的实现。为什么要尝试这样做？
.parent{
填充：100px；
宽度：400px；
高度：400px；
}
.家长：悬停{
背景颜色：绿色；
}
.孩子{
填充：100px；
宽度：200px；
高度：200px；
}
.孩子：悬停{
背景颜色：蓝色；
}
小孩
child:hoverbackground这当然可以用javascript来完成。所以这确实很难看，但它可以工作（有点）。我基本上是把父母复制成孩子的兄弟姐妹。默认情况下，父覆盖是隐藏的，然后显示在子覆盖的悬停位置上。Chrome不喜欢它，除非您使用+选择器而不是~选择器。这不是很容易扩展，但它可能会工作 正如其他人所说，javascript可能是一个更好的解决方案
.parent{填充：100px；宽度：400px；高度：400px；位置：相对；z索引：998；}
.parent:hover{背景色：绿色；}
.child{填充：100px；宽度：200px；高度：200px；位置：相对；z索引：1000；}
.child:hover{背景色：蓝色；}
.parent覆盖{填充：继承；宽度：继承；高度：继承；位置：绝对；顶部：0；左侧：0；z索引：999；背景色：#FFF；显示：无；}
.child:hover~.parent覆盖{display:block；}
小孩
<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>
article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }
.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; }
我有一个我认为更好的解决方案，因为它可以扩展到更多级别，可以根据需要扩展到多个级别，而不仅仅是两个或三个级别 我使用边框，但也可以使用任何想要的样式，比如背景色 有了边界，我们的想法是：
- 有不同的边框颜色只有一个div，鼠标所在的div，不在任何父对象上，也不在任何子对象上，因此只能以不同的颜色看到此类div边框，而其余部分保持为白色
<!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>
层次边界标记
.parent{显示：块；位置：相对；z索引：0；
高度：自动；宽度：自动；填充：25px；
}
.parent bg{显示：块；高度：100%；宽度：100%；
位置：绝对；顶部：0px；左侧：0px；
边框：1px纯白；z索引：0；
}
.parent bg:悬停{边框：1px纯红色；}
.child{显示：块；位置：相对；z索引：1；
高度：自动；宽度：自动；填充：25px；
}
.child bg{显示：块；高度：100%；宽度：100%；
位置：绝对；顶部：0px；左侧：0px；
边框：1px纯白；z索引：0；
}
.child bg:hover{border:1px纯红色；}
.grands{显示：块；位置：相对；z索引：2；
高度：自动；宽度：自动；填充：25px；
}
.grandson bg{显示：块；高度：100%；宽度：100%；
位置：绝对；顶部：0px；左侧：0px；
边框：1px纯白；z索引：0；
}
.grands bg:hover{border:1px纯红色；}
父母亲
小孩
孙子