6

2 つの異なるクラスが div にアタッチされている場合にのみ、CSS :hover セレクターを適用しようとしています。私はこれを試しましたが、これはホバー効果を取り除きます。

.accordionButton .cyan:hover{
    color: cyan;    
}

私もこれを行うことはできません：

.accordionButton:hover, .cyan:hover{
    color: cyan;    
}

他に2色あるので、これも試しています。

基本的に、.accordionButton と .cyan の両方である div の上にカーソルを置いたときにのみ CSS を適用する方法はありますか?

4

2 に答える 2

13

スペースを入れずにクラス セレクターをチェーンすることで、クラス セレクターを組み合わせることができます。
以下の例では、宣言は両方のクラス:hoverを持つ要素にのみ適用されます。

.accordionButton.cyan:hover {
  color: cyan;
}
<div class="accordionButton">Only Button</div>
<div class="cyan">Only Cyan</div>
<div class="accordionButton cyan">Both Classes</div>

参考までに、MDN:
複数のクラスが適用されている場合は要素を対象にするを参照してください。

複数のクラスを 1 つの要素に適用し、セレクター内のすべてのクラスが存在する場合にのみ要素を選択できます。

これらのクラスを空白なしで連鎖させることにより、これらのクラスがすべて含まれている場合にのみ要素を一致させたいことをブラウザに伝えることができます。

于 2013-02-07T19:32:55.590 に答える
1

セレクターでクラス間にスペースを入れると、 classを持つcyan要素の子孫である class を持つすべての要素が選択されますaccordionButton。同じ要素を参照する場合は、スペースを削除してください。

于 2013-02-07T19:36:49.147 に答える