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>

希望这有助于！ :)