Question

我有一个透明的Twitter图标保存为SVG。一旦我将其添加为img标签并将其包装在链接标签中，如下所示：

<a href="#"><img src="http://imgh.us/twitter_25.svg" width="300"></a>

我想给它一个悬停效果： box-shadow：10px 10px 5px＃888888;

但问题是图像显示为白色背景，悬停效果也会应用于白色背景区域。

a:hover {
  box-shadow: 10px 10px 5px #888888;
}

<a href="#">
  <img src="http://imgh.us/twitter_25.svg" width="300">
</a>

Answer 1

也许是这样？

a img {
        border-radius: 50%;
        display: block;
        border: none;
}

a:hover img{
  box-shadow: 10px 10px 5px #888888;
}

<a href="#"><img src="http://imgh.us/twitter_25.svg" width="300"></a>

Answer 2

也许阴影可能会更好......

＆＃13;

a:hover img {
  filter: drop-shadow(10px 10px 5px #888);
}

＆＃13;

<a href="#">
  <img src="http://imgh.us/twitter_25.svg" width="200">
</a>

＆＃13;