父悬停上的 CSS 保持子不过滤灰度

2022-01-22 00:00:00 hover css

我有两个街区——父母和孩子.在悬停父块更改灰度.如何让子 div 在悬停时保持绿色(不是灰色，而是绿色)?

I have two blocks- parent and child. On hover- parent block change grayscale. How can i keep child div with green color on hover (not grey, but green)?

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

推荐答案

没有.所有子元素都是灰色的.但是试试这个:

No. All child elem to be grayscalled. But try this:

.parent {
  width: 100px;
  height: 100px;
  position: relative;
}
.childbg {
  background-color: red;
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 0;
}
.child {
  background-color: green;
  width: 50px;
  height: 50px;
  position: absolute;
  z-index: 10;
}
.parent:hover > .childbg {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}

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

相关文章