在 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;
}