父级悬停上的 CSS 使子级不过滤灰度

Question

我有两个 block ——父 block 和子 block 。在悬停父 block 上更改灰度。我怎样才能让子 div 在悬停时保持绿色(不是灰色，而是绿色)？

<style>
.parent {
   color:red
   width: 100px;
   height: 100px;
}
.child {
   color: green
   width: 50px;
   height: 50px;
}
.parent:hover {
   filter: grayscale(100%)
}
</style>

<div class="parent">
   <div class="child">
   </div>
</div>

Answer 1

我想不出直接的方法，但这里有一个使用绝对定位的解决方法。

<style>
  .wrapper {
    position: relative
  }
  .parent {
    background-color: red;
    width: 100px;
    height: 100px;
  }
  .child {
    background-color: green;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
  }
  .parent:hover {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
  }
</style>
<div class="wrapper">
  <div class="parent">
  </div>
  <div class="child">
  </div>
</div>