在整个链接悬停时强调链接的一部分

Question

我有一个链接 - 通知 - 旁边有一张红色光盘。我想悬停在光盘或文本上，导致文本只有下划线（我也想点击链接中的任何地方去同一个链接）。

我无法在Google中找到有关此特定问题的任何内容。

我尝试的所有内容都会使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就可以了。）

Answer 1

您可以在一个范围内放置要加下划线的部分。

这也会产生这样的效果，当你超过特定范围时，你将在线获得下划线。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如果您想要仅在将鼠标悬停在该部分上时仅为某个部分加下划线，只需将css更改为：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我希望这次能帮到你： - ）

Answer 2

您可以使通知计数绝对定位为伪元素，然后将计数添加为属性。那样你的HTML就会保持简单＆amp;清洁。所以html看起来像这样：

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

这里的功能示例： https://jsfiddle.net/p0593yz9/1/

Answer 3

试试这个：

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

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