如何应用child:hover而不是parent:hover

Question

使用下面的html，当我将鼠标悬停在child上时，我会得到parent上的绿色背景。我如何才能阻止这种情况的发生呢？如果我悬停在子元素之外，我确实想要绿色背景。

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>

​

Answer 1

所以这真的很难看，但它是有效的(某种程度上)。我基本上是在创建一个parent的副本作为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>

​

Answer 2

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

Answer 3

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