如何申请孩子：悬停但不是父母：悬停 [英] How to apply child:hover but not parent:hover

问题描述

使用下面的html，当我将鼠标悬停在孩子身上时，我得到了父母的绿色背景。我怎么能阻止这种情况发生？如果我悬停在子元素外面，我确实需要绿色背景。

CSS3很好。

 <风格> 
 .parent {padding：100px;宽度：400px;高度：400像素; } 
 .parent：hover {background-color：green; } 
 .child {padding：100px;宽度：200px;高度：200像素; } 
 .child：hover {background-color：blue; } 
< / style> 
< div class =parent> 
< div class =child> Child< / div> 
< / div> 
  

解决方案

所以这真的很丑，但它起作用的）。我基本上是创建一个父母的副本作为孩子的兄弟姐妹。父代覆盖默认是隐藏的，然后显示在孩子的悬停上。 Chrome不喜欢它，除非您使用+选择器而不是〜选择器。这不是很好的扩展性，但它可能工作。

正如其他人发布的，javascript可能是一个更好的解决方案。

 < style> 
 .parent {padding：100px;宽度：400px;高度：400像素;位置：相对; z-index：998; } 
 .parent：hover {background-color：green; } 
 .child {padding：100px;宽度：200px;高度：200像素;位置：相对; z-index：1000; } 
 .child：hover {background-color：blue; } 
 .parent-overwrite {padding：inherit;宽度：继承;高度：继承;位置：绝对; top：0;左：0; z-index：999; background-color：#FFF;显示：无; } 
 .child：hover〜.parent-overwrite {display：block; } 
< / style> 
 
< div class =parent> 
< div class =child> Child< / div> 
< div class =parent-overwrite>< / div> 
< / div> 
  

With the following html, when I hover over child, I get a green background on parent. How can I stop that from happening? I do want the green background if I am hovering outside of the child element.

CSS3 is fine.

<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>

解决方案

So this is REALLY ugly, but it works (kind of). I'm basically creating a duplicate of parent as a sibling of child. parent-overwrite is hidden by default, then displayed on the hover of child. Chrome doesn't like it unless you use the + selector instead of the ~ selector. This isn't very scalable, but it may work.

As the other guys posted, javascript would likely be a better solution.

<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>

这篇关于如何申请孩子：悬停但不是父母：悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！