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

CSS on parent hover keep child not filter-grayscaled(父悬停上的 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>

这篇关于父悬停上的 CSS 保持子不过滤灰度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！