禁用图像链接悬停下划线

Question

刚刚将一个半透明的图片制作成我的rails App中的一个链接

<%= link_to image_tag("cow.png"), cows_path %>

然而，实际的图像并没有占据一个完美的矩形，因为它的透明度，当我用鼠标悬停在它上面时，它会在图像下方的图像矩形的宽度上创建一个黑色条，从图像的非透明部分的任一侧。

问题是如何让这种悬停行为停止。

透明图像是牛，而黑条则存在问题。棕褐色的东西是页面背景，而不是图像。

有什么想法吗？我只是不知道CSS命令来解决这个问题。

编辑：Fiddle。抱歉。离我的电脑有点远了。我提出了一些建议，但似乎并没有解决问题。我也可能做错了。这是一个css.scss样式表。

Answer 1

对我有用的是把它放在.animal-buttons类中：

a {
background: none;
}

Answer 2

除非你给我们生成的HTML，否则我们必须假设这个。只需使用：

a:hover {text-decoration: none;}
a img {border: 0;}

Answer 3

由于缺少实际的HTML，它是在黑暗中拍摄的，但您可以尝试这些CSS规则：

img {border:0;}
a:hover {text-decoration: none;}

Answer 4

:focus {outline:0;}

a:hover {text-decoration:none; outline:0;}

img, img:hover {border:0; outline:0;}