1

以下のコードには、3 つのホバー テキストと "hello" という世界があります。最初の 2 つは「hello」のハイライト部分で、3 番目は「hello」全体をハイライトしたいと思います。最初の 2 つのスパンをすべて 3 番目のスパンでラップしてもうまくいきません。その理由は理解できます。HTML タグをオーバーラップできないことはわかっていますが、ネストが解決策であるかどうかもわかりません。

3 番目のホバーが機能するように、これをどのように設定しますか?

http://jsfiddle.net/CAWhP/3/

HTMLは次のとおりです。

<div id="test1"> highlight hel in hello</div>

<div id="test2"> highlight lo in hello</div>

<div id="test3"> highlight all of hello</div>

<span class="testspan1"> hel</span><span class="testspan2">lo </span>

CSSは次のとおりです。

#test1:hover ~ .testspan1{

   background: red;
}

#test2:hover ~ .testspan2{

   background: red;
}
#test3:hover ~ .testspan3{

   background: red;
}
4

3 に答える 3

1

関連する要素を選択してください

#test3:hover ~ span{
   background: red;
}

デモ

または、これを使用することもできます

#test3:hover ~ span.testspan1, #test3:hover ~ span.testspan2 {
   background: red;
}

デモ 2

于 2013-02-16T16:09:03.903 に答える
1

なぜこれをしたいのかわかりませんが、問題を解決するには、これを行うことができると思います：

#test3:hover ~ .testspan1,
#test3:hover ~ .testspan2 {
   background: red;
}

完全版と短縮版:

すべてのルールが同じプロパティを適用するため、完全な CSS を次のように短縮できます。

#test1:hover ~ .testspan1,
#test2:hover ~ .testspan2,
#test3:hover ~ .testspan1,
#test3:hover ~ .testspan2
{
   background: red;
}

実施例

于 2013-02-16T16:09:12.237 に答える
0

回避策は次のとおりです: JSFiddle

#test3:hover ~ .testspan1 {

background: red;

}

#test3:hover ~ .testspan2 {

background: red;

}

のようにクラスをコンマで区切ることもできます#test3:hover ~ .testspan1, #test3:hover ~ .testspan2。両方のスパンに同じスタイルを持たせたい場合は、これでうまくいきます。

于 2013-02-16T16:09:03.393 に答える