CSS：在链接的一部分跳过下划线

是否有可能有一个连续的链接，其中文本通常在鼠标悬停上加下划线，但在中间有一个没有下划线的部分（例如图像）？这不起作用：CSS：在链接的一部分跳过下划线

<a href="#">one <span style="text-decoration:none;">two</span> <img src="img.png" style="border:0px; text-decoration:none;"> three</a>

来源

2010-06-04 Biggles

我真正想要的是有一个图像“附加”的链接，没有它得到悬停的下划线。这里是我想出了一个解决方案：

<a href="#" style="background:url('pic.png') no-repeat; background-position: left center; padding-left: 20px;">Link</a>

填充左是抵消文本，以便它不重叠的图像。
随着背景位置你可以移动图像，使其更好与文本对齐。
如果图像比文本填充顶 和填充底部可用于调整外观更高。

这种技术还可以与CSS精灵这样使用：

<a href="#" style="background:url('sprites.png') no-repeat; background-position: -16px -16px; padding-left: 32px;">Link</a>

我使用了类似的技术，使用CSS精灵，而不是普通的内置图片：

<span style="background:url('sprites.png') no-repeat; background-position: -16px -16px; padding-left: 32px;"></span>

希望这可以帮助某人

来源

2010-07-09 12:57:19 Biggles

将你的的文本包裹在一个范围内，然后附加使用这种背景精灵技术的CSS类对我来说工作得非常好。 – 2014-06-30 05:00:44

<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如下是可能的。

LOOK以下示例

<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>

P.S.我想知道是否有可能与CSS和html

来源

2010-06-04 07:40:02 Salil

这将迫使下划线始终处于开启状态。如果我做一个特殊的班级来处理悬停，它将打破连续的联系。 – Biggles 2010-06-04 08:00:55

请在完成后粘贴您的代码。我想知道你如何处理悬停。新手真的很好的问题:) – Salil 2010-06-04 08:04:49

Salil：经过进一步测试，我发现它并没有解决我的问题。 – Biggles 2010-06-04 08:05:47

a, a:hover { text-decoration: underline; } 
a img, a:hover img { text-decoration: none !important; }

来源

2010-06-04 08:28:25 eyelidlessness

如果我想要在三点之后强调而不是在两点之后悬停，我该怎么办？ – Salil 2010-06-04 08:37:40

风格：a，a：hover {text-decoration：underline; } a img，a：hover img，span.two {text-decoration：none！important; border：0; }和标记：one two three – eyelidlessness 2010-06-04 08:41:54

无法让这些工作。图像仍然用下划线标出。 – Biggles 2010-06-04 08:55:02

CSS：在链接的一部分跳过下划线

回答

相关问题