是否可以有一个连续的链接，其中文本通常在鼠标悬停时带有下划线，但在中间有一个部分（例如图像）没有此下划线？这不起作用：
<a href="#">one <span style="text-decoration:none;">two</span> <img src="img.png" style="border:0px; text-decoration:none;"> three</a>
【问题讨论】：
标签： html css image hyperlink underline
创建一个隐藏下划线的类，以及添加它们的子类。
.underline-some {
text-decoration: none;
}
.underline-some:hover .text {
text-decoration: underline;
}<a href="#" class="underline-some">
<span class="text">Boyz</span> ??
<span class="text">Men</span>
</a>上面的示例代码仅在悬停时为链接添加下划线。对于始终带下划线的链接，请删除 :hover。
【讨论】：
a, a:hover { text-decoration: underline; }
a img, a:hover img { text-decoration: none !important; }
【讨论】：
<a href="#" style="text-decoration:none;">
<span style="text-decoration:underline;">one</span>
two
<img src="img.png" style="border:0px; text-decoration:none;"> three
</a>
我认为只能如下使用javascript。
看下面的例子
<html>
<head></head>
<style>
a{
text-decoration:none;
}
a:hover
{
text-decoration:none;
}
.sample
{
text-decoration:underline;
}
.sample_none
{
text-decoration:none;
}
</style>
<script type="text/javascript">
function show_underline(){
document.getElementById('sample').className= 'sample';
}
function hide_underline(){
document.getElementById('sample').className= 'sample_none';
}
</script>
<a href="#" onmouseover="show_underline();" onmouseout="hide_underline();"> <span id="sample" class="sample_none">two</span>
<img src="img.png" style="border:0px;"> three
</a>
</body>
</html>
附：我想知道是否可以仅使用 css 和 html
【讨论】：
我真正想要的是将图像“附加”到链接上，而不会在悬停时加下划线。这是我想出的解决方案：
<a href="#" style="background:url('pic.png') no-repeat; background-position: left center; padding-left: 20px;">Link</a>
这种技术也可以与 CSS sprites 一起使用，如下所示：
<a href="#" style="background:url('sprites.png') no-repeat; background-position: -16px -16px; padding-left: 32px;">Link</a>
我使用了类似的技术来使用 CSS sprites 而不是普通的内联图像：
<span style="background:url('sprites.png') no-repeat; background-position: -16px -16px; padding-left: 32px;"></span>
希望这对某人有所帮助