使用键盘上下箭头时jquery自动完成ul列表项突出显示

Question

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" id="ui-id-1" tabindex="0" style="z-index: 1003; display: none; width: 415px; top: 267px; left: 882px;">
    <li class="ui-menu-item" role="presentation">
        <a id="ui-id-3" class="ui-corner-all" tabindex="-1"> Holland </a>
    </li>
    <li class="ui-menu-item" role="presentation">
        <a id="ui-id-4" class="ui-corner-all" tabindex="-1"> Hungary </a>
    </li>
</ul>

使用 JQUERY 自动完成功能在文本框中输入时，上述无序列表作为建议列表出现。

当我使用键盘向上和向下箭头滚动列表时，列表项没有聚焦，换句话说，当前滚动项的背景没有突出显示。

我试过了

.ui-menu .ui-menu-item a:active a:focus a:hover{
    background-color: red;
}

但是没用，当前滚动列表项的背景总是白色的。

谢谢， 斯里

Answer 1

.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: red;
   border: none;
   color:#000;
   border-radius:0;
   font-weight: normal;
}

来自 stackoverflow 帖子之一的上述 css 为我提供了解决方案。感谢原始解决方案提供者。