在css中应用悬停效果

Question

我有一个react js应用程序，它包含一个带下拉列表的select。我想为两种状态应用样式：当鼠标悬停在下拉项上时和当下拉项聚焦时。

.select__option.select__option--is-focused {
background: blue;
}
.select__option:hover {
background: gray;
}

两种风格都适用。如果用户将使用键盘箭头(向上/向下(在下拉列表中导航，则将在项目上应用blue颜色，如果用户将鼠标悬停，则项目将应用gray颜色作为背景
问题：当用户悬停具有blue背景的聚焦项目时，悬停颜色会覆盖blue，但我不想覆盖蓝色，即使悬停应用于聚焦元素上，所以聚焦元素每次都应该保持其颜色
如何解决
https://codesandbox.io/s/codesandboxer-example-forked-y4zs8?file=/example.tsx:0-505

Answer 1

只需在适当的位置切换元素(以便以后覆盖以前的元素(或将.select__option.select__option--is-focused:hover{background: blue}作为规则也设置为

.select__option:hover {
background: gray;
}
.select__option.select__option--is-focused {
background: blue;
}

<div class="select__option">
.select__option
</div>
<div class="select__option select__option--is-focused">
.select__option.select__option--is-focused
</div>

Answer 2

如果没有其他任何帮助，那么只需编写一个规则，在满足这两个条件时显式应用蓝色背景色-元素具有这些类名，并处于悬停状态。只需列出逗号分隔的两个选择器表达式，就可以将两者合并为一个规则。

.select__option.select__option--is-focused,
.select__option.select__option--is-focused:hover {
background: blue;
}

Answer 3

尝试not()伪类：

.select__option:not(.select__option--is-selected):hover {
background: gray;
}

糟糕的是，我上错了课。更新了