我有兩個塊 - 父母和孩子。在懸停塊更改灰度上。我怎樣才能保持懸停（不是灰色，但綠色）的綠色孩子div？CSS父親懸停保持孩子不過濾灰度
<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>
由於您已經添加了更多的代碼，我不確定您想要達到的目標，但是這不應該將過濾器應用於孩子。
.parent+child :hover {
filter:none;
}
這是行不通的（ –
我想不出直接的方法，但這裏是一個使用絕對定位的解決方法。
<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>ty，i已經通過這種方式 –
偉大的思想想象一樣））） –
號所有子ELEM被grayscalled。不過，試試這個：
.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>ty，我已經這樣做 –
所以......發生了什麼？ –
<style>
.granny {
width: 100px;
height: 100px;
}
.parent {
color:red
width: 100px;
height: 100px;
}
.child {
position: absolute;
color: green
width: 50px;
height: 50px;
}
.parent:hover {
filter: grayscale(100%)
}
</style>
<div class="granny">
<div class="parent">
</div>
<div class="child">
</div>
</div>
**你不能**。過濾器會影響父代和所有後代。也許你應該向我們展示你實際上正在嘗試實現的目標。 –
所以，我應該將孩子塊從父母移出，並將其定位：絕對？這是唯一的解決方案？ –
這會做什麼？你需要向我們展示你正在嘗試做什麼......大概有一個或兩個涉及的圖像？ –