2

我正在尝试使用我正在开发的网站上的社交共享图标来完成两件事。

首先，我想添加一个投影。然后我想让它们默认不饱和，并在悬停时着色。

下面是我正在使用的代码：

.a2a_floating_style.a2a_vertical_style img {
-webkit-filter: drop-shadow(6px 6px 6px rgba(0,0,0,0.5));
    filter: url(#drop-shadow);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=6, OffY=6, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=6, OffY=6, Color='#444')";
    -webkit-transition:all .4s;
    -moz-transition:all .4s;
    -ms-transition:all .4s;
    -o-transition:all .4s;
    transition:all .4s;
}

.a2a_floating_style.a2a_vertical_style img:not(:hover) {
    -webkit-filter: drop-shadow(6px 6px 6px rgba(0,0,0,0.5));
    filter: url(#drop-shadow);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=6, OffY=6, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=6, OffY=6, Color='#444')";
    -webkit-filter:grayscale(100%);
    -moz-filter:grayscale(100%);
    -ms-filter:grayscale(100%);
    -o-filter:grayscale(100%);
    filter:grayscale(100%);
}
.a2a_floating_style.a2a_vertical_style img:hover {
    -webkit-filter: drop-shadow(6px 6px 6px rgba(0,0,0,0.5));
    filter: url(#drop-shadow);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=6, OffY=6, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=6, OffY=6, Color='#444')";
    -webkit-filter:grayscale(0%);
    -moz-filter:grayscale(0%);
    -ms-filter:grayscale(0%);
    -o-filter:grayscale(0%);
    filter:grayscale(0%);
}

它做了饱和位，但不是阴影。如果我删除去饱和指令，那么阴影效果会很好。

有没有办法让我组织这个，这样两种效果都会起作用？

谢谢。

4

1 回答 1

1

您覆盖过滤器 css，而不是向现有过滤器添加过滤器。通过删除一些 css 行，问题变得清晰：

-webkit-filter: drop-shadow(6px 6px 6px rgba(0,0,0,0.5));
-webkit-filter: grayscale(0%);

但是，您可以通过用空格分隔它们来提供多个过滤器：

-webkit-filter: drop-shadow(6px 6px 6px rgba(0,0,0,0.5)) grayscale(0%);
于 2014-09-26T21:14:03.307 回答