在整個鏈接的懸停上加下劃線部分

我有一個鏈接 - 通知 - 旁邊有紅色光盤。我想將光標懸停在光盤或文本上，導致文本僅加下劃線（我還希望點擊鏈接中的任意位置以轉到相同的鏈接）。在整個鏈接的懸停上加下劃線部分

我能找到關於這個具體問題沒有在谷歌。

一切我嘗試讓1得到一個下劃線以及通知文本：

HTML

<div class="col-sm-offset-4 col-sm-5" id="nav"> 
    <div class="userbox"> 
     <a href="#"><span class="numbercir">1</span> Notifications</a> | 
     <a href="~/Signin">Signin</a> | <a href="~/Signup">Signup</a> 
    </div> 
</div>

CSS

.numbercir { 
    border-radius: 3px; 
    height: 16px; 
    width: 16px; 
    padding: 2px 3px; 
    background: #f00; 
    color: #fff; 
    text-align: center; 
    font: 12px Arial, sans-serif; 
} 
/* This doesn't work - ie doesn't stop the 1 getting an underline */ 
a .numbercircle:hover { 
    text-decoration: none !important; 
}

我怎樣才能做到這一點？謝謝。（只要該技術具有廣泛的瀏覽器支持，HTML 5/CSS3就可以使用）。

來源

2016-11-21 niico

您可以將要加下劃線的部分放在一個範圍內。

這也有這樣的效果，即當您查看特定範圍時，您將在線獲取下劃線。

a .ca:hover { 
 
\t text-decoration:underline; 
 
}

<a href="#" style="text-decoration:none">ABC<span class="ca">CD</span></a>

而如果你想強調的只是某一部分不是隻有當你將鼠標懸停在那部分，只是改變CSS來此：

a:hover .ca { 
 
\t text-decoration:underline; 
 
}

<a href="#" style="text-decoration:none">ABC<span class="ca">CD</span></a>

我希望我這次得到了你:-)

來源

2016-11-21 02:32:27 Daidon

'在線' 是一個錯字？以確認我想在整個事情上懸停 - 只強調文字。 – niico

@Daidon，我仍然認爲它不符合OP的要求......'CD'應該加下劃線，當我在整個單詞的任何地方懸停時 – Vikrant

只需將CSS更改爲：hover .ca {...}然後，我會舉一個例子 – Daidon

試試這個：

a .highlight:hover { 
 
\t text-decoration:underline; 
 
}

<a href="#" style="text-decoration:none">Notif<span class="highlight">ications | Loc</span>ations</a>

來源

2016-11-21 02:45:16 Vikrant

你可以做通知計數絕對定位僞元素，然後添加數爲屬性。這樣你的html將保持簡單&乾淨。因此，HTML是這樣的：

<a href="#" class="numbercircle" data-number="12">Notifications</a>

功能例如這裏： https://jsfiddle.net/p0593yz9/1/

來源

2016-11-21 03:25:57

thx對於這個被接受的答案有什麼好處？ – niico

只是一個偏好問題。其他提到的解決方案要求您將任何鏈接文本包裹在span元素中。 –

只是一個說明 - 這不適用於IE 11（但在邊緣工作） – niico

在整個鏈接的懸停上加下劃線部分

回答

相關問題