CSS :hover ONLY when there are two classes

You can combine class selectors by chaining them without spaces.
In the example below, the :hover declaration is applied only to elements with both classes:

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

<div class="accordionButton">Only Button</div>
<div class="cyan">Only Cyan</div>
<div class="accordionButton cyan">Both Classes</div>

For reference, see MDN:
Target an element if it has more than one class applied.

You can apply multiple classes to an element and ... only select the element when all of the classes in the selector are present.

We can tell the browser that we only want to match the element if it has all of these classes by chaining them together with no white space between them.