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给了我解决方案。感谢最初的解决方案提供者。

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

1 个答案: