非正方形透明图标图像的悬停效果

Question

正如你将在jsfiddle上看到的，即使我没有进入内部图像，它也开始悬停效果。我想，它认为我的形象是方形的。我该如何解决这个问题呢？

不是: app上有一个礼物图标。

<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>，这是无效的。