1

別の部分がホバーされているときに、HTML テキストの一部にホバー状態を適用する (CSS-) 方法を探しています。2 つの部分は同じ CSS クラスを共有しています。

単語に分割された HTML のテキストがたくさんあります。各単語は CSS クラスにリンクされています。2 つの異なる単語を同じクラスに関連付けることができます。

例として、3 つの単語と 2 つのクラス (classA、classB) を取り上げると、

word1, word3 -> classA
word2 -> classB

次の HTML コードを記述します。

<span class=classA>word1</span>
<span class=classB>word2</span>
<span class=classA>word3</span>

私の問題：マウスオーバーで同じクラスを共有する単語のグループの外観を変更したい。

私は試した ：

.classA {
    color: red;
  }
.classA:hover {
    color: blue;
  }

...しかし、マウスが「word1」の上に移動すると、「word1」が強調表示されますが、同じクラス (「classA」) を共有する「word3」は強調表示されません。

どんな助けでも大歓迎です！

4

2 に答える 2

2

簡単な答えはNOです。以下で共有したソリューションを使用する場合を除き、CSS のみでそれを行うことはできません。

隣接するセレクターを使用して:hover、同時に効果を適用します

.classA:hover + .classB + .classA {
    color: blue;
}

デモ

残念ながら、これは最初のグループ要素の場合にのみ機能:hoverします。CSS で戻ることはできません。2 番目の方法はラッパー要素を使用することですが、必要なクラスの組み合わせが 2 つしかない場合、これは制限されます。単一タイプのクラスにスタイルを適用します。

.wrapper_class:hover .classA {
   color: blue;
}

デモ 2

于 2013-08-17T09:11:16.410 に答える