我的 HTML 页面中有一个链接,它是一个图像,悬停时从完全灰度过渡到部分灰度。
这里是稍微简化的 HTML:
<div id="myid">
<a href="targetlinkhere"><img alt="" class="rounded" src="imglinkhere" /></a>
</div>
和我的 CSS:
#myid a:link,#myid a:active,#myid a:visited{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
-webkit-transition: -webkit-filter ease 1s;
-moz-transition: -moz-filter ease 1s;
-o-transition: -o-filter ease 1s;
-ms-transition: -ms-filter ease 1s;
transition: filter ease 1s;
}
#myid a:hover {
filter: grayscale(20%);
-webkit-filter: grayscale(20%);
-moz-filter: grayscale(20%);
-ms-filter: grayscale(20%);
-o-filter: grayscale(20%);
}
Firefox 一切正常,但 Chrome 根本不应用任何过滤器。而且也不过渡。
虽然当我将上面的代码应用于 #myid img
时,过滤器将应用于图像。
对 a
标签应用过滤器不对吗?
最佳答案
对于那些使用 sass 或类似东西的人来说,灰度函数(和其他函数)可能会被覆盖。解决方案是使用混合,直到他们解决这些问题。
@mixin grayscale($value) {
filter: #{ "grayscale(" + $value + ")" };
}
.nav-link {
transition: filter ease 0.5s;
&:hover,
&:active,
&:focus {
img {
@include grayscale(100%);
}
}
}
关于css - 过滤器灰度不适用于 Chrome,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40314900/