CSS :hover ONLY when there are two classes

Question

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

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

我也不能这样做:

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

因为我还有其他两种颜色，所以我也想用它来做这件事。

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

Answer 1

您可以通过不带空格的链接来组合类选择器。
在下面的示例中，: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 .

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.