css - CSS :hover ONLY when there are two classes

我试图仅在将两个不同的类附加到div时才应用CSS:hover选择器。我已经尝试过了，但这摆脱了悬停效果。

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

我也不能这样做:

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

因为我还有另外两种颜色，所以我也想用这种颜色。

基本上，有什么方法可以使CSS仅在将鼠标悬停在同时是.accordionButton和.cyan的div上时应用吗？

最佳答案

您可以通过链接没有空格的类选择器来组合它们。
在下面的示例中，: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:
Target an element if it has more than one class applied。