CSS:只有当有两个类时才悬停

Question

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

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

我也不能这样做：

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

因为我还有另外两种颜色，我也在尝试使用。

基本上，有没有什么方法可以让CSS只在悬停在既是.accordionButton又是.conin的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:
如果元素应用了多个类，则将其作为目标。

您可以将多个类应用于一个元素，然后。。。仅当选择器中的所有类都存在时才选择元素。

我们可以告诉浏览器，只有当元素具有所有这些类时，我们才想通过将它们链接在一起来匹配元素，并且它们之间没有空格。

Answer 2

如果像您所做的那样在选择器中的类之间放置空格，则会选择cyan类的所有元素，这些元素是accordionButton类元素的后代。如果要引用同一个元素，请删除空格。