懸停時CSS上的陰影不能完全刪除鼠標使用Chrome

我懸停在我的網站上的某些透明PNG的陰影效果，但陰影不會完全刪除時，鼠標離開圖像（還是不工作的Safari和Firefox，但是這將是另一個問題）懸停時CSS上的陰影不能完全刪除鼠標使用Chrome

這是原始圖像：

original image

這與下拉陰影圖像：

image with shadow

這是鼠標離開後的圖像：

enter image description here

下面是代碼：和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"/>

謝謝你的幫助！

來源

2014-11-14 yenssen

不知道這是否打亂了你的佈局，但嘗試添加填充：

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

來源

2014-11-14 22:23:01 Lys777

至於Safari和Firefox，這裏是一個兼容性圖表：https：//developer.mozilla.org/en-US/docs/Web/CSS/filter ?#Browser_compatibility。兼容Safari 6+和FF 35+。 JSFiddle在我的Safari 7中運行，但不是我的FF 31。 – Lys777 2014-11-14 22:47:03

演示 - 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); 
}

來源

2014-11-15 09:41:11

懸停時CSS上的陰影不能完全刪除鼠標使用Chrome

回答

相關問題