非正方形の透明なアイコン画像のホバー効果

Question

jsfiddleで見られるように、内部の画像を入力しなくても、ホバー効果が始まります。私は、私のイメージが正方形であると考えています。これをどうすれば解決できますか？

：アプリにギフトアイコンがあります。

<img id="image" src="http://i.hizliresim.com/kvAl3v.png" ></img> 

img:hover { 
    -webkit-filter: drop-shadow(1px 1px 0 black) 
       drop-shadow(-1px -1px 0 black); 
    filter: drop-shadow(1px 1px 0 black) 
     drop-shadow(-1px -1px 0 black); 
} 

https://jsfiddle.net/hLtbgzg6/

Answer 1

コメントで述べたように、あなたのホバーCSSを処理するときに、img要素は常にブラウザによってブロックとして見られることになります。

これは本当に必要ですか？あなたが本当にやっているのであれば、http://www.w3schools.com/tags/tag_map.aspエリアとマウスオーバーイベントを組み合わせると、画像に新しいクラス（例えばhovered）が割り当てられます。次に、そのクラスにフィルタcssを追加します。

img.hovered { 
-webkit-filter: drop-shadow(1px 1px 0 black) 
drop-shadow(-1px -1px 0 black); 
filter: drop-shadow(1px 1px 0 black) 
drop-shadow(-1px -1px 0 black); 
} 

あなたはIMG要素の終了タグ<\img>を必要はありませんが、これは無効なHTMLです。