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

正如您将在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/

最佳答案

如评论中所述，在处理悬停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。

关于javascript - 非正方形透明图标图像的悬停效果，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37445187/