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

悬浮效果为非方形，透明图标图像

1 个答案: