webkit-filter greyscale does not work

Question

問題是，在記事本+ +它不會出現灰色，這讓我覺得它不是代碼的正確部分，但我不知道，因爲我是一個新手。我希望它做的事情是當我將鼠標懸停在它上面時顯示圖像並使其成爲灰度。

div.img2 { 
    position: absolute; 
    top: 0%; 
    left: 0%; 
    transition: grayscale 2s ease; 
    -webkit-transition: grayscale 2s ease; 
} 
div.img2:hover { 
    filter: grayscale(100%); 
    -webkit-filter: grayscale(100%); 
} 

Answer 1

上面的代碼是完全可靠的，確實使圖像在懸停時變爲灰色。請記住，您的選擇器div.img2:hover正在將滑塊應用於<div>，並且<div>需要具有img2的類別。爲了展示懸停，<div>需要有一個子女<img>。

您可能會將該類應用於圖像（與<img class="img2">），並且打算編寫div .img2（帶空格）。此處的空格表示選擇器應該以.img2類別中的任何元素爲目標，這些元素是<div>的子級。

在這裏你可以看到CSS寫在原來的問題工作：

div.img2 { 
 
    background: position: absolute; 
 
    top: 0%; 
 
    left: 0%; 
 
    transition: grayscale 2s ease; 
 
    -webkit-transition: grayscale 2s ease; 
 
} 
 

 
div.img2:hover { 
 
    filter: grayscale(100%); 
 
    -webkit-filter: grayscale(100%); 
 
}

<div class="img2"> 
 
    <img src="https://www.w3schools.com/css/img_fjords.jpg"> 
 
</div>

希望這有助於！ :)