Question

是否有人知道是否可以防止对标签的子项加下划线，同时强调标签内容的其余部分？

以下是一个示例 - 您可以在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>

Answer 1

阅读此类似答案及其链接以获取更多信息：Remove :hover on :after 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>

选择性地停止文本修饰：在链接标记的子项上加下划线

1 个答案: