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

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 元素将始终被浏览器视为一个 block 。

但是你真的需要这个吗？如果你真的这样做，那么你可能想要合并 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。