css - webkit-filter 灰度不起作用

Question

问题是在 notepad++ 中，它不会显示为灰色，这让我认为它不是代码的正确部分，但我不确定，因为我是新手。我想让它做的事情是显示图像，当我将鼠标悬停在图像上时，它会变成灰度。

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>需要有 child <img>为了展示悬停。

您可能正在将类应用于图像而不是(使用 <img class="img2"> )，并且打算写 div .img2 (带空格)。此处的空格表示选择器应以类为 .img2 的任何元素为目标。是 <div> 的 child .

在这里您可以看到 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>

希望对您有所帮助! :)