有谁知道是否可以防止在标签的子标签上加下划线,同时对标签的其余内容下划线?
下面是一个示例 - 您可以看到这在 JSFiddle 上工作。我已经尝试了我能想到的所有方法,但是文本下划线继续应用于链接内的所有文本。我正在Chrome上查看,但我确信这适用于所有浏览器。
a {
font-size: 32px;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a div {
color: pink;
}
a:hover div,
a:active div,
a:focus div {
text-decoration: none !important;
}
<a href="http://news.bbc.co.uk">
<div class="inner">I don't want this bit underlined on hover. What's the big deal?</div>
This bit should be underlined on hover. Underlining here is fine. I have no objections to underlinining in this bit.
</a>
阅读这个类似的答案及其链接以获取更多信息: 删除 :悬停在 :之后 elemets
http://jsfiddle.net/thirtydot/ygXy6/4/
.CSS:
a {
font-size: 32px;
text-decoration: none;
}
a:hover span {
text-decoration: underline;
}
.HTML:
<a href="http://news.bbc.co.uk">
<div class="inner">I don't want this bit underlined on hover. What's the big deal?</div>
<span>This bit should be underlined on hover. Underlining here is fine. I have no objections to underlinining in this bit.</span>
</a>