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的{{1}}类的任何元素。

在这里，您可以看到CSS工作原始问题：

＆＃13;

<div>

＆＃13;

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%);
}

＆＃13;

希望这有帮助！：）

webkit-filter灰度无效

1 个答案: