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：在鏈接的一部分跳過下劃線

回答

相關問題