Clever Geek Handbook

CSS: hover ONLY when there are two classes

I am trying to apply only the CSS: hover selector when two different classes are added to a div. I tried this, but it gets rid of the hover effect.

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

I can't do this either:

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

because I have two other colors that I am trying to do with this.

Basically, is there a way to make the CSS only apply when one is hovering over a div that is and .accordionButton AND.cyan?

+3


source to share


2 answers


You can link classes like this:

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


This hover is applied to elements with both styles.

+8


source


If you put space between the classes in the selector, as you do, then you are selecting all class members cyan

that are descendants of class members accordionButton

. Remove space if you want to refer to the same element.



0


source






More articles:


All Articles