如何应用 child:hover 但不是 parent:hover
Posted
技术标签:
【中文标题】如何应用 child:hover 但不是 parent:hover【英文标题】：How to apply child:hover but not parent:hover 【发布时间】：2011-02-11 15:33:21 【问题描述】：使用以下 html，当我将鼠标悬停在子项上时，我会在父项上获得绿色背景。我怎样才能阻止这种情况发生？如果我悬停在子元素之外，我确实想要绿色背景。
CSS3 很好。
.parent
padding: 100px;
width: 400px;
height: 400px;
.parent:hover
background-color: green;
.child
padding: 100px;
width: 200px;
height: 200px;
.child:hover
background-color: blue;
<div class="parent">
<div class="child">Child</div>
</div>【问题讨论】：
【参考方案1】：所以这真的很难看，但它确实有效（有点）。我基本上是在创建父母的副本作为孩子的兄弟姐妹。 parent-overwrite 默认隐藏，然后在 child 悬停时显示。 Chrome 不喜欢它，除非您使用 + 选择器而不是 ~ 选择器。这不是很可扩展，但它可能会起作用。
正如其他人所说，javascript 可能是更好的解决方案。
<style>
.parent padding: 100px; width: 400px; height:400px; position: relative; z-index: 998;
.parent:hover background-color: green;
.child padding: 100px; width: 200px; height:200px; position: relative; z-index: 1000;
.child:hover background-color: blue;
.parent-overwrite padding: inherit; width: inherit; height: inherit; position: absolute; top: 0; left: 0; z-index: 999; background-color: #FFF; display: none;
.child:hover ~ .parent-overwrite display: block;
</style>
<div class="parent">
<div class="child">Child</div>
<div class="parent-overwrite"></div>
</div>【讨论】：
感谢您的尝试 :) 但是，由于可扩展性，这对我不起作用。 哈哈哈谢谢，解决这个问题很有趣。我以前完全遇到过同样的问题，但我认为我的解决方案是手动更改没有悬停声明的父类上的类。不过，这对您不起作用，因为您希望将鼠标悬停在您的父母身上仍然有效。我的程序员认为我会因为这个丑陋、丑陋的黑客而被严重否决。谢谢你证明他错了；）【参考方案2】：我只能通过添加额外的标记来做到这一点。需要添加一个空 div，它本质上用作父背景。看看这里的 CSS。
HTML 部分：
<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>
CSS 部分：
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;
http://jsbin.com/ubiyo3/edit
【讨论】：
【参考方案3】：最简单的方法可能是使用 JS 来处理这种 CSS。也许您可以尝试重新考虑您的实施。你为什么要做这样的事情？
【讨论】：
我有一棵很大的元素树，其中一些会响应鼠标点击。我只希望突出显示响应点击的元素。在 javascript 中执行此操作将意味着基于 mouseover/mouseout 的样式，并且会大大膨胀代码库。 它不会使代码库膨胀——如果您使用的是 jQuery，它将大约需要 4-5 行代码。在伪代码中： $('.parent').hover(function() ...set CSS to Green ...); $('.child').hover(function() this.parent.css(..set css to white..);【参考方案4】：使用普通的 CSS 是不可能的。您要求一个子类 (child:hover) 的伪类来影响父级的 background 声明。没有办法使用常规 css 来指定那种东西。
这绝对可以使用 javascript 来完成。
【讨论】：
我不相信这不能用 CSS 完成。我想我想以某种方式将 .parent:hover 更改为仅在没有悬停的子元素时才选择。这样子不会影响父声明，而父选择器会更有辨别力。 否；这正是 CSS 设计者所排除的。编码、规范和使用这种模型几乎是不可能的。在 XPATH 中可以使用父选择器，但无需担心伪元素和类。这对他们来说是一个艰难的决定，但您不能使用 CSS 来允许子选择器过滤备份以影响父选择器。【参考方案5】：我有一个我认为更好的解决方案，因为它可以扩展到更多级别，可以根据需要进行扩展，而不仅仅是两个或三个。
我使用边框，但也可以使用任何想要的样式，例如背景色。
有了边框，想法是：
只有一个 div 有不同的边框颜色，鼠标所在的 div，不在任何父级，也不在任何子级，因此只能看到不同颜色的 div 边框，而其余的保持白色。您可以在以下位置进行测试：http://jsbin.com/ubiyo3/13
这里是代码：
<!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>
【讨论】：
以上是关于如何应用 child:hover 但不是 parent:hover的主要内容，如果未能解决你的问题，请参考以下文章
CSS之hover的使用和鼠标移入移出事件的区别addEventListenermouseentermouseleavequerySelectorsplit+~
核心数据错误 - NSDatelocalizedCaseInsensitiveCompare：无法识别的选择器发送到实例
go 解决no required module provides package xxx: go.mod file not found in current directory or any pare