父悬停上的 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 保持子不过滤灰度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文