Autocomplete-Änderung css Auswahl über die Tastatur (Pfeiltaste)

Question

Ich versuche, die CSS zu ändern, wenn ein Benutzer ein Ergebnis über die Tastatur auswählt (Pfeiltaste).

.ui-menu .ui-menu-item a:hover, .ui-menu .ui-menu-item a:focus, .ui-menu .ui-menu-item a:active { 
    background:#ff8a00!important; 
    color:#000; 
    border-radius:0; 
} 

Diese CSS wird jedoch nur mit einem Mausereignis wirksam.

Answer 1

Hier gehen Sie.

WORKING DEMO

Die CSS:

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { 
    background: #ff8a00; 
    border: none; 
    color:#000; 
    border-radius:0; 
    font-weight: normal; 
} 

Answer 2

try this:

jsFiddle

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus{ 
    background: #ff8a00!important; 
    color: #000; 
    border-radius: 0; 
} 

Answer 3

ich diese Lösung gefällt. Aber ich habe mich jetzt gefragt, ob es möglich ist, auch die Hintergrundfarbe des Links zu ändern, wenn ein ui-menu-item schwebt? Das wäre toll, dieses Code-Snippet zu verwenden!