Question

我在.png透明图像上使用-webkit-filter：drop-shadow来为它提供漂亮的3D效果。现在，我希望使用jQuery缓慢地悬停投影颜色。

css：

  .image { -webkit-filter: drop-shadow(2px 2px 2px #fff); }

现在我想使用jQuery为这样的阴影设置动画：

 $(".image").hover(function() { 
   $(this).animate({dropShadow: "2px 2px 2px #00f"},500);
 }, function() { 
   $(this).animate({dropShadow: "2px 2px 2px #fff"},500);
 });

我编造了＆＃34; dropShadow＆＃34;举个例子。我已经四处搜索了，但我不知道如何选择像投影一样的webkit过滤器。它甚至可能吗？

Answer 1

你可以单独使用纯CSS来实现这个目的：

<强> HTML：

<img class='image' src='path_to_your_image.format' />

<强> CSS：

.image {
    -webkit-transition:-webkit-filter 0.4s ease-in-out;
}
.image {
    -webkit-filter: drop-shadow(5px 5px 5px #0f0);
}
.image:hover {
    -webkit-filter: drop-shadow(5px 5px 5px #00f);
}

或者，如果由于某种原因你真的需要jQuery，那么你可以这样做。此示例实际上在hover上添加/删除了一个具有不同阴影设置的单独类。

<强> CSS：

.image {
    -webkit-transition:-webkit-filter 0.4s ease-in-out;
}
.image {
    -webkit-filter: drop-shadow(5px 5px 5px #0f0);
}
.hover {
    -webkit-filter: drop-shadow(5px 5px 5px #00f);
}

<强> jQuery的：

$(function () {
    $(".image").hover(function () {
        $(".image").toggleClass("hover");
    });
});

Sample with pure CSS | Sample with jQuery + CSS | Target Filter from jQuery

如何使用jQuery选择-webkit-filter：drop-shadow？

1 个答案: