Stop underlining image links

时间：2010-09-19 作者：thunderror

在我的小部件栏上，我有一个超链接的图像。问题是CSS强调了这一点。如何删除下划线？

更新：刚刚注意到这是导致下划线的原因：

}
.entry a,
.secondaryColumn a,
#commentsContainer h3 a,
.commentlist .comment-author a {
    border-bottom: 1px solid #ddd;
    color: #3c6c92;
    font-weight: bold;
}
.entry a:hover,
.secondaryColumn a:hover,
#commentsContainer h3 a:hover,
.commentlist .comment-author a:hover,
.commentlist .comment-meta a:hover {
    color: #3c6c92;
    border-bottom: 1px solid #3c6c92;
}

将边框底部更改为0px可以实现这一目的，但它会在所有小部件上去掉边框。我使用Grid focus进行了一点定制@thunderror.com

3 个回复

最合适的回答,由SO网友:Rarst 整理而成

根据定义，它不是真正的超链接图像。它是超链接标记a 包含图像标记的img. 最有可能的是，这是一个真正有下划线的链接，图像就在其中。

您需要创建新的CSS规则，使链接与图像匹配，并且不指定下划线（顺便说一下，它也可以是边框底部属性，有些人建议将其置于下划线之上，以获得更好的排版外观）。

如果可能，请提供该网站的链接。CSS在理论上甚至比PHP在理论上更糟糕。：）

我想是关于侧边栏顶部的推特图像吧？试试这个：

.textwidget a, .textwidget a:hover { border-bottom: none; }

但这将影响所有文本小部件。最好将单个类指定给link，比如

<a href="http://thunderror.com/" class="twitter-link">

并设计它。

SO网友:Beardy Boy

我对这个问题有一个可行的解决方案。

`<ul><li><a href="#"><img alt="" src="/images/your/image.jpg"> The text you want underlined on hover</a></li></ul>`

在css中，您需要执行以下操作img{display: block;} 或img{float: left;}

当然，这取决于你根据自己的需要选择哪个选项。

我希望这有助于解决你（尽管一年后）和任何其他有同样问题的人的问题。

工作示例见The Book Depository blog. 查找右下角的发布者博客部分：）

SO网友:Patch

编辑：回答修订和扩展的问题：

您遇到了一个很棒的东西，称为css特异性。我会让你在谷歌上搜索血淋淋的细节，但基本上，“.commentlist.commentauthor a”比“.twitter link”更具特异性。

如果要覆盖样式，则需要这样做：

.commentlist .comment-author .twitter-link {
    border-bottom: none;
}

（我大约99%确定类名（.twitter链接）比元素名（a）更具体。）。如果上述操作不起作用，您可能需要向小部件添加一个类，如“twitter小部件”，然后使用“.commentlist.comment author.twitter小部件a{…”覆盖

较旧的答案，可能仍能回答更一般的问题：

好吧，如果您想在全局范围内启用链接下划线，可以在样式中添加以下css。css:

a { text-decoration: none; }

如果只想关闭该链接的下划线，可以执行以下操作：

.widgetname a { text-decoration: none; }

在哪里。widgetname是小部件容器的“class”属性中的值。

结束

小码农CODE

Stop underlining image links

相关推荐

如何版本化主css文件？