滤镜灰度不与Chrome工作

Question

我的HTML页面中有一个链接，它是一个图像，并且在悬停时从完全灰度过渡到部分灰度。

下面是HTML的一些简化:

<div id="myid">
    <a href="targetlinkhere"><img alt="" class="rounded" src="imglinkhere" /></a>
</div>

and my 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，直到他们解决这些问题。

@mixin grayscale($value) {
    filter: #{ "grayscale(" + $value + ")" };
}
.nav-link {
    transition: filter ease 0.5s;
    &:hover,
    &:active,
    &:focus {
        img {
            @include grayscale(100%);
        }
    }
}

Answer 2

我怀疑您无意中重写了该属性。试试这个:

#myid a {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-transition: -webkit-filter ease 1s;
  -moz-transition: -moz-filter ease 1s;
  -ms-transition: -ms-filter ease 1s;
  -o-transition: -o-filter ease 1s;
  transition: filter ease 1s;
}
#myid a:hover {
  -webkit-filter: grayscale(20%);
  -moz-filter: grayscale(20%);
  -ms-filter: grayscale(20%);
  -o-filter: grayscale(20%);
  filter: grayscale(20%);
}

或者，如果你想保留你当前的选择器，像这样:

#myid a:link, #myid a:active, #myid a:visited {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-transition: -webkit-filter ease 1s;
  -moz-transition: -moz-filter ease 1s;
  -ms-transition: -ms-filter ease 1s;
  -o-transition: -o-filter ease 1s;
  transition: filter ease 1s;
}
#myid a:hover, #myid a:link:hover, #myid a:active:hover, #myid a:visited:hover {
 -webkit-filter: grayscale(20%);
  -moz-filter: grayscale(20%);
  -ms-filter: grayscale(20%);
  -o-filter: grayscale(20%);
  filter: grayscale(20%);
}

编辑:所以，问题是您需要将a元素设置为块级元素，因为它包含块级img作为子元素。

#myid a {
    display: block; /* or inline-block would probably work too */
    /*
    All your filter stuff here
    */
}