Question

我正在添加图片链接，我无法删除a：链接样式和a：为我的文本链接指定的悬停样式。

我添加了一个新的.css样式的a.button：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

据我所知，你有两种不同类型的链接，文本和img，并希望它们的样式不同。但是，在您的小提琴中，您使用的CSS会将样式应用于所有＆＃39; a＆＃39;标签，因此手头的问题。在我看来，你应该为这两个人提供单独的课程。类型。

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

这是我在课堂上放置文字链接的小提琴＆＃34; textLink＆＃34;

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

，图片链接在＆＃34;按钮＆＃34; class（就像之前一样，将它们改为＆＃34; imageLink＆＃34;或者你喜欢的任何东西）

<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

锚标记的“自然”行为只是包含文本的链接，对吧？因此，当您为img添加此锚标记时，您看到的矩形是浏览器“准备”文本，因此它采用默认字体大小的高度。

诀窍是为.button类0px制作字体大小，删除填充，并删除边框，和Voila！

#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;
}

我希望这就是你想要的！

这是一个更新的小提琴。

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

HTML / CSS：链接样式用于图像超链接，我不能让它停止？

2 个答案: