1

この HTML に基づく 2 つの例を次に示します。

<a href="#">
    <div class="foo">
        hello
        <span class="bar">world</span>
    </div>
</a>

最初のものでは、ホバー時にリンクに下線を付けないようにし、次にリンクの下線のサブ部分を作成すると、うまく機能します。

a {
    text-decoration:none;
}
a:hover {
    text-decoration: none;
}
a:hover .bar {
    text-decoration: underline;
}

http://jsfiddle.net/3qPyX/1/

2 番目では、セレクターを逆にして、2 番目の単語に下線が引かれないようにします。しかし、今、奇妙なことが起こります。セレクターが 2 番目の単語から下線を削除する必要があるように見えても、リンク全体に下線が引かれています。 <-- (これが問題です。なぜこれが起こるのですか?)

a {
    text-decoration:none;
}
a:hover {
    text-decoration: underline;
}
a:hover .bar {
    text-decoration: none;
}

http://jsfiddle.net/EAmwt/

2番目の例で何がうまくいかないのか誰か説明できますか? Chrome で調べると、span.barが の計算されたスタイルを持っていることがわかりますtext-decoration:none。

更新：問題を回避する方法を説明するいくつかの回答。これは本当に私の質問ではないことを除けば素晴らしいことです。私が知りたいのは、この動作が、たとえば大胆な動作と異なるのはなぜですか? たとえば、2 番目の例を太字で試すと、期待どおりの結果が得られます: http://jsfiddle.net/3qPyX/4/

4

3 に答える 3

2

アップデート！（@Camが提案したように）：

テキストの一部を個別の要素に追加する必要があります: http://jsfiddle.net/3qPyX/5/

CSS:

.foo, a:hover .bar, a {
    text-decoration:none;
}
a:hover .foo {
    text-decoration: underline;
}
于 2013-05-17T13:54:14.020 に答える