jquery uiオートコンプリートでホバリングと矢印キーのナビゲーションで異なる背景色

Question

私は自分の問題でjsfiddleを作った。

Link to my jsfiddle

問題は、リスト上にカーソルを移動し、マウスを使用している間、私は私の願望背景ホバー色を取得し、です。しかし、矢印キーを使用して移動すると、jquery UIのデフォルトテーマカラーが有効になります。これは、マウスと矢印キーを使用した2種類の背景色を作成します。私は使用しようとしました

.ui-menu-item .ui-menu-item-wrapper:focus 

しかし成功しません。私はjQuery UI 1.12.1とjQuery 1.10.2を使用しています。どのように私は両方のイベントで私の欲望の背景色とテキストの色を持っていますか？

ありがとうございます。

Answer 1

これを担当しているクラスが見つかりました。 jquery uiのテーマローラーのCSSファイルを調べると、私に手がかりが与えられました。

.ui-state-active, 
.ui-widget-content .ui-state-active, 
.ui-widget-header .ui-state-active, 
a.ui-button:active, 
.ui-button:active, 
.ui-button.ui-state-active:hover { 
    border: 1px solid #aaaaaa; 
    background: #cfd8e0; 
    font-weight: normal; 
    color: #212121; 
} 

ここでは、矢印キーを使用してリストをホバリングまたはナビゲートする場合と同じ効果があります。