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

【问题标题】：Hover effect for non-square, transparent icon image非方形透明图标图像的悬停效果
【发布时间】：2016-05-25 18:40:02
【问题描述】：

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

【问题讨论】：

你没有。图像是块元素。您正在寻找的是 .svg/vector。
什么鬼。我刚开始网页设计并被卡住了。这似乎很容易
我应该把这张图片下载为 svg 吗？
嗯，不。 en.wikipedia.org/wiki/Scalable_Vector_Graphics 没有简单优雅的解决方案；它可以使用图像映射和 javascript 来完成，但同样不优雅。

标签： javascript jquery html css hover

【解决方案1】：

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

【讨论】：

我开始用带有 mousemove 事件的 javascript 尝试它，因为有 4 个正方形