在 css 中应用 hover 效果

Question

我有一个 react js 应用程序，其中包含一个带有下拉列表的 select。 我想将 styles 应用于 2 种状态：当鼠标 hover 成为下拉项时，以及当下拉项被聚焦时。

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

styles 都可以工作。 如果用户将使用键盘箭头（上/下）在下拉菜单中导航，则将在项目上应用blue ，如果他将 hover 将应用gray作为背景。
问题：当用户 hover 具有blue背景的焦点项目时，hover 颜色会覆盖blue ，但我不想覆盖蓝色，即使 ZE0542F579DF8E8138ADE69F8F8F5310BF2Z 每次都应将其颜色应用于焦点元素。
如何解决？
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

尝试not()伪 class：

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

我的错，我在 not() 中给出了错误的 class。 更新了它

Answer 3

如果没有其他帮助，那么只需编写一条规则，在满足两个条件时明确应用蓝色背景色 - 元素具有这些 class 名称，并悬停。 您可以将两者组合成一个规则，只需将两个选择器表达式以逗号分隔即可。

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