如何申请子女：悬停但不是父母：悬停

使用以下html，当我将鼠标悬停在儿童上时，我获得了父母的绿色背景。我怎么能阻止这种情况发生？如果我悬停在子元素外面，我确实需要绿色背景。如何申请子女：悬停但不是父母：悬停

CSS3很好。

<style> 
     .parent { padding: 100px; width: 400px; height:400px; } 
     .parent:hover { background-color: green; } 
     .child { padding: 100px; width: 200px; height:200px; } 
     .child:hover { background-color: blue; } 
</style> 
<div class="parent"> 
     <div class="child">Child</div> 
</div>

来源

2010-04-23 case nelson

所以这是真的很丑，但它的作品（种）。我基本上是创建一个父母的副本作为孩子的兄弟姐妹。父代覆盖默认是隐藏的，然后显示在孩子的悬停上。 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>

来源

2010-04-23 19:38:58

感谢您试用:)不过你，因为这可扩展性韩元”的为我工作。 – 2010-04-23 19:41:42

哈哈哈谢谢，这是一个有趣的问题要解决。我以前完全遇到过这个完全相同的问题，但我认为我的解决方案是手动更改没有悬停声明的父级的类。这对你来说不起作用，因为你想让你的父母继续工作。我的程序员认为我会因为这个丑陋，丑陋的黑客而被严重低估。谢谢你证明他错了;） – 2010-04-23 21:58:14

最简单的事情可能是使用JS这种CSS。也许你可以尝试重新思考你的实现。你为什么试图做这样的事情？

来源

2010-04-23 18:04:29

我有一个大的树的元素，其中一些将鼠标点击响应。我只希望对点击作出响应的元素进行高亮显示。在javascript中这样做将意味着基于mouseover/mouseout的样式，并会大大增加代码库的膨胀。 – 2010-04-23 18:13:43

它不会臃肿的代码库 - 这将是约4-5行代码，如果你正在使用jQuery。在伪代码： $（ '父'）悬停（函数（）{...设置CSS绿色...}）; $（ '孩子'）悬停（函数（）{this.parent.css（..设置CSS白色..}）; – 2010-04-23 18:39:13

这是不可能的使用简单的香草CSS。你要求伪造一个孩子（child:hover）以影响父母的background声明。没有办法使用普通的css来指定这种事情。

这绝对可以使用JavaScript来完成。

来源

2010-04-23 18:08:46 eykanal

我不相信这不能用CSS来实现我想。我想以某种方式改变.parent：悬停只能选择如果没有有悬停的子元素这样孩子就不会影响父声明，而家长选择会更挑剔 – 2010-04-23 18:17:59

不，这恰恰是。什么CSS设计人员已排除了。它变得几乎不可能代码，规范，并使用排序模式。在XPATH，可以使用家长选择，但目前还没有伪元素和类担心那里。这是他们一个艰难的决定，但你*不能*使用CSS来让孩子选择过滤回升到影响父。 – 2010-04-23 20:14:02

我只能通过添加额外的标记来做到这一点。需要添加一个空的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

来源

2010-04-23 19:57:41 RussellUresti

我有什么，我认为这是一个更好的解决方案，因为它可扩展到多层次，多达想要的，不只是两三个。

我使用边框，但它也可以用任何想要的样式完成，如背景颜色。

与边框，这个想法是：

有不同的边框颜色只有一个格，股利在鼠标的位置，而不是任何父母，没有任何一个孩子，所以可以只看到这种不同颜色的边框，其余的则保持白色。

你可以测试它：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>

来源

2012-02-06 09:49:49 z666zz666z

如何申请子女：悬停但不是父母：悬停

回答

相关问题