父悬停上的CSS可以使子级不过滤灰阶

本文介绍了父悬停上的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可以使子级不过滤灰阶的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！