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

@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
    */
}

过滤灰度不适用于Chrome

2 个答案: