11

对于文本链接，我有：

CSS：

a:link {color: #3366a9; text-decoration: none}
a:hover {border-bottom: 1px solid; color: black}

但这也会在我不想要的可链接IMG上添加黑色下划线。

border-bottom使用 CSS 悬停时如何删除可链接的 IMG？

我尝试了以下方法：

a:hover img {border-bottom: 0px}

但这不起作用

现场示例 （尝试将鼠标悬停在左上角的徽标上）

4

7 回答 7

13

如果您浮动您的图像与内联，这将起作用，并且不需要修改史蒂夫回答所需的图像链接属性。

a:hover img {
border: none !important;
display: block;
}
于 2009-06-23T04:54:51.647 回答
7 
a:hover img {border-bottom: 0px;}

这应该够了吧。

于 2009-06-23T03:57:18.070 回答
2

不确定这是否是最好的解决方案，但它有效：

    a:link {color: #3366a9; text-decoration: none}
    a:hover {border-bottom: 1px solid black; }

    .aimg:link {color: #3366a9; text-decoration: none}      
    .aimg:hover { border-bottom: none; }

然后将带有图像的锚点设置为“aimg”类：

<a class="aimg" href="Test.htm"><img src="images/myimage.gif" /></a>
于 2009-06-23T04:28:00.703 回答
0

这在 IE 中也适用于我。IE 显示了边框，但这样就不再显示了。

a img {/*whatever you need*/
border: none !important;
}
a img:hover{/*whatever you need*/
}
于 2013-05-29T06:45:11.090 回答
0

在这里找到这个例子：https ://perishablepress.com/css-remove-link-underlines-borders-linked-images/

a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif] {
    text-decoration: none;
    border: 0 none;
    }

我想这正是你想要的。
在 Firefox 中完美运行，从链接中删除所有效果，其中包含给定格式的图像。

于 2016-05-01T21:11:12.583 回答
0

我使用 jQuery 为所有包含图像的标签添加了一个“no-hover”类：

$('a > img').each(function() {
  $(this).parent().addClass('no-hover');
});

在CSS中我这样做了：

a.no-hover:hover {
  border-bottom: 0px
}

如果 jQuery 对你来说太重了，你可以使用picoQuery。只要您选择 .each() 方法，它只有 1k。

于 2016-12-06T13:36:14.593 回答
-1

你试过a img {border:none}吗？

于 2009-06-23T04:30:22.343 回答