我正在制作一個側邊欄，我想要它，以便當您將滑鼠懸停在特定 div 上時，該 div 的影像會將灰度從 100% 更改為 0%。這是我目前的進展：https : //jsfiddle.net/8tx6ju97/
<div class="example">
<div class="a">
<img src="https://sep.yimg.com/ay/filmandvideolighting/times-square-106-primary-red-lighting-gel-sheet-10x10-in-1.jpg" class="one" width="60" />
</div>
<div class="b">
<img src="https://sep.yimg.com/ay/filmandvideolighting/times-square-106-primary-red-lighting-gel-sheet-10x10-in-1.jpg" class="two" width="60" />
</div>
</div>
<style>
.one, .two {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
margin-left: 19px;
padding-top: 10px;
padding-bottom: 10px;
}
.two {
padding-top: 10px;
}
.one {
padding-bottom: 5px;
}
.example {
width: 100px;
background-color: black;
position: absolute;
top: 0;
left: 0;
}
.a {
outline: 1px solid white;
}
</style>
uj5u.com熱心網友回復：
只需將此代碼添加到您的 css 中
.one:hover {
-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
filter: grayscale(0%);
}
.two:hover {
-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
filter: grayscale(0%);
}
https://jsfiddle.net/q5pdemjh/1/
請享用！
uj5u.com熱心網友回復：
你可以這樣做：
.one, .two {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
margin-left: 19px;
padding-top: 10px;
padding-bottom: 10px;
transition: all 0.5s;
}
.one:hover, .two:hover {
filter: grayscale(0);
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
}
增加的transition: all 0.5s保證，從去grayscale(100%)到grayscale(0)和背部平滑在0.5秒的時間內，而:hoverpseudoelement允許當您懸停與類的div你只觸發這種改變.one和.two。
uj5u.com熱心網友回復：
您可以使用此代碼。
.one, .two {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
margin-left: 19px;
padding-top: 10px;
padding-bottom: 10px;
transition: all .5s ease;
}
.two {
padding-top: 10px;
}
.one {
padding-bottom: 5px;
}
.example {
width: 100px;
background-color: black;
position: absolute;
top: 0;
left: 0;
}
.a:hover .one,
.b:hover .two {
-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
filter: grayscale(0%);
}<div class="example">
<div class="a">
<img src="https://sep.yimg.com/ay/filmandvideolighting/times-square-106-primary-red-lighting-gel-sheet-10x10-in-1.jpg" class="one" width="60" />
</div>
<div class="b">
<img src="https://sep.yimg.com/ay/filmandvideolighting/times-square-106-primary-red-lighting-gel-sheet-10x10-in-1.jpg" class="two" width="60" />
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/351457.html
標籤：javascript php html 查询 css