7

タグの残りのコンテンツに下線を付けながら、タグの子に下線を引くことを防ぐことができるかどうか、誰かが知っていますか?

以下に例を示します。これは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>​
4

1 に答える 1

5

詳細については、この同様の回答とそのリンクを参照してください。

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>​
于 2012-11-22T09:53:44.723 に答える