首頁猿問懸停時顏色變化

懸停時顏色變化

JavaScript

瀟瀟雨雨 2022-06-16 10:26:14

我有一張圖片列表，當我將鼠標懸停在一張圖片上時，我希望其余的圖片變成黑色，而我懸停的圖片保持其原始顏色。你能幫我做嗎？.inst__img { width: 11%; margin-left: 10%; display: inline-block;}.inst__img img { width: 100%}<section class="global__inst"> <div class="inst__img"> <img src="https://media.wired.com/photos/598e35994ab8482c0d6946e0/master/w_2560%2Cc_limit/phonepicutres-TA.jpg" alt=""> <span>vi</span> </div> <div class="inst__img"> <img src="https://media.wired.com/photos/598e35994ab8482c0d6946e0/master/w_2560%2Cc_limit/phonepicutres-TA.jpg" alt=""> <span>vi</span> </div> <div class="inst__img"> <img src="https://media.wired.com/photos/598e35994ab8482c0d6946e0/master/w_2560%2Cc_limit/phonepicutres-TA.jpg" alt=""> <span>vi</span> </div> <div class="inst__img"> <img src="https://media.wired.com/photos/598e35994ab8482c0d6946e0/master/w_2560%2Cc_limit/phonepicutres-TA.jpg" alt=""> <span>vi</span> </div></section>

查看完整描述

3 回答

狐的傳說

TA貢獻1804條經驗獲得超3個贊

您需要為灰度選擇未懸停的圖像：img:not(:hover)

.inst__img {

width: 11%;

margin-left: 10%;

display: inline-block;

}

.inst__img img{

width: 100%;

}

.global__inst:hover img:not(:hover) {

filter: grayscale(1);

-webkit-filter: grayscale(1);

}

</div>

</div>

</div>

</div>

</section>

反對回復 2022-06-16

慕桂英4014372

TA貢獻1871條經驗獲得超13個贊

用這個：

.inst__img {

width: 11%;

margin-left: 10%;

display: inline-block;

}

.inst__img img {

width: 100%

}

.global__inst:hover .inst__img img {

filter: grayscale(100%);

}

.inst__img:hover img {

filter: none !important;

}

</div>

</div>

</div>

</div>

</section>

反對回復 2022-06-16

Cats萌萌

TA貢獻1805條經驗獲得超9個贊

請嘗試以下。初始所有列表圖像將是黑色的，懸停的圖像可以隨意顯示

.inst__img{

border:2px solid red;

background: black; opacity:.5

}

.inst__img:hover{

border:2px solid red;

background: white;

opacity:1

}

反對回復 2022-06-16

3 回答
0 關注
157 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

懸停時顏色變化

懸停時顏色變化

3 回答

添加回答