jquery ui 自动完成中悬停和箭头键导航的不同背景颜色

Question

我已经用 jsfiddle 解决了我的问题。

问题是，当我使用鼠标悬停在列表上时，我得到了我想要的背景悬停颜色。但是，当我使用箭头键导航时，jquery ui 默认主题颜色生效。这将创建两组背景颜色，一组使用鼠标，另一组使用箭头键。我试过使用

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

现在我使用箭头键在列表中悬停或导航时具有相同的效果。

jquery ui 自动完成中悬停和箭头键导航的不同背景颜色

different background color on hover and on arrow key navigation in jquery ui autocomplete

jquery

css

jquery-ui

jquery-ui-autocomplete

jquery-hover