如何申请子项：悬停但不申请父项：悬停

小编典典

如何申请子项：悬停但不申请父项：悬停

css

使用以下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>

阅读 350

2020-05-16

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

2020-05-16