css - 过滤器灰度不适用于 Chrome

Question

我的 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 标签应用过滤器不对吗？

Answer 1

对于那些使用 sass 或类似东西的人来说，灰度函数(和其他函数)可能会被覆盖。解决方案是使用混合，直到他们解决这些问题。

@mixin grayscale($value) {
    filter: #{ "grayscale(" + $value + ")" };
}

.nav-link {
    transition: filter ease 0.5s;

    &:hover,
    &:active,
    &:focus {
        img {
            @include grayscale(100%);
        }
    }
}