css - 禁用图像链接悬停下划线

Question

刚刚在我的 rails App 中制作了一个半透明的图片作为链接

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

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

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

链接图像

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

有任何想法吗？我只是不知道解决此问题的 CSS 命令。

编辑：小提琴。对不起。离开我的电脑了一会儿。我包括了一些建议，但它们似乎并没有解决问题。我也可能做错了。这是一个 css.scss 样式表。

score 5 · Accepted Answer

5

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

a {
background: none;
}

于 2012-09-28T16:53:43.287 回答

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

:focus {outline:0;}

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

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

4 回答 4