问题是在 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%);
}
最佳答案
您上面的代码非常可靠,并且确实使图像在悬停时变灰。请记住,您的选择器 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>
希望对您有所帮助! :)
关于css - webkit-filter 灰度不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45539338/