HTML/CSS: Link 样式被用于图像超链接，我无法让它停止？

Question

我正在向图像添加 links，但我无法删除为我的文本 links 指定的 a:link 样式和 a:hover 样式。

我为 a.button 添加了新的 .css 样式：link 和 a.button:hover，

#content a.button:link {
     text-decoration:none;
     }
#content a.button:hover {
text-decoration:none;
}

并设置

<a href="www.website.com" class="button"><img></img></a>

但它仍然使用默认样式！我快被逼疯了。我检查了不同的网站，他们都说在 href 之后简单地使用 class="nameofclass"，但是在我的网站上使用图像时它对我不起作用。

根据要求 JSFiddle：https://jsfiddle.net/aqtq2gq4/1/

Answer 1

据我了解，您有两种不同类型的 links，text 和 img，并希望它们具有不同的样式。但是，在您的 fiddle 中，您使用的 css 将样式应用于所有 'a' 标签，从而解决了手头的问题。在我看来，您应该为两种 'a' 类型设置单独的 classes。

https://jsfiddle.net/aqtq2gq4/5/

这是 fiddle，其中我将文本 link 放入 class "textLink"

<td><center><a href="http://www.website.com/" class="textLink">Text Link</a></center></td>

和图像 link 在 "button" class 中（和以前一样，将它们更改为 "imageLink" 或您喜欢的任何内容）

<td><center><a href="http://www.website.com/" class="button"><img src="images/midland_button.png" width="238" height="86" alt="Midland" /></a></center></td>

然后单独应用样式

#content a.textLink:link {
    color:#CC0000;
    text-decoration:none;
    padding: 3px 3px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
}
#content a.textLink:hover {
    color:#0CF;
    text-decoration:none;
    border:1px dashed;
    padding: 3px 3px;
    background-color:#282D57;
}
#content a.button:link {

}
#content a.button:hover {

}

Answer 2

锚标记的 "natural" 行为只是一个包含文本的 link，对吗？因此，当您为 img 添加此锚标记时，您看到的矩形是文本的浏览器 "preparing"，因此它采用默认字体大小的高度。

诀窍是使 .button 的字体大小 class 0px，移除填充，移除边框，瞧！

#content a.button:link {
    text-decoration:none;
    font-size: 0px;
    padding: 0px;
    border: none;
}

#content a.button:hover {
    text-decoration:none;
    font-size: 0px;
    padding: 0px;
    border: none;
}

这将为 img 添加不透明度：

#content a.button > img:hover{
    opacity: 0.8;
}

希望这就是你想要的！

这是更新后的 fiddle。

https://jsfiddle.net/plushyObject/aqtq2gq4/8/

HTML/CSS: Link 样式被用于图像超链接，我无法让它停止？

HTML/CSS: Link Styling being used for image hyperlinks, and I can't get it to stop?

html

css

hyperlink