html - 悬停时的 CSS 阴影未在使用 Chrome 的鼠标移出时完全移除

Question

我在我的网站上的一些透明 png 中悬停时有阴影效果，但是当鼠标离开图像时阴影没有完全消除（并且在 Safari 和 Firefox 中也根本不起作用，但这将是另一个问题）

这是原始图像：

这是带有阴影的图像：

这是鼠标离开后的图像：

这是代码：和一个JSfiddle

CSS：

<style>
    img:hover {
       -webkit-filter: drop-shadow(5px 5px 5px #222); 
       filter: drop-shadow(5px 5px 5px #222);  
    }
</style>

HTML：

<img src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Triple-Spiral-4turns_green_transparent.png" width="150"/>

感谢您的帮助！

Answer 1

演示 - http://jsfiddle.net/victor_007/jqavcnLb/1/

在正常状态下添加白色阴影将修复它

img:hover {
    -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter: drop-shadow(5px 5px 5px #222);
}
img {
    -webkit-filter: drop-shadow(5px 5px 5px #ffffff);
    filter: drop-shadow(5px 5px 5px #ffffff);
}

Answer 2

不确定这是否会扰乱您的布局，但请尝试添加填充：

<img src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Triple-Spiral-4turns_green_transparent.png" width="150" style="padding:10px"/>