jquery ui 自动完成中悬停和箭头键导航的不同背景颜色
different background color on hover and on arrow key navigation in jquery ui autocomplete
我已经用 jsfiddle 解决了我的问题。
问题是,当我使用鼠标悬停在列表上时,我得到了我想要的背景悬停颜色。但是,当我使用箭头键导航时,jquery ui 默认主题颜色生效。这将创建两组背景颜色,一组使用鼠标,另一组使用箭头键。我试过使用
.ui-menu-item .ui-menu-item-wrapper:focus
但没有成功。我正在使用 jquery ui 1.12.1 和 jquery 1.10.2。如何在这两个事件中获得我想要的背景颜色和文本颜色?
提前致谢。
我找到了对此负责的类。查看 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;
}
现在我使用箭头键在列表中悬停或导航时具有相同的效果。
我已经用 jsfiddle 解决了我的问题。
问题是,当我使用鼠标悬停在列表上时,我得到了我想要的背景悬停颜色。但是,当我使用箭头键导航时,jquery ui 默认主题颜色生效。这将创建两组背景颜色,一组使用鼠标,另一组使用箭头键。我试过使用
.ui-menu-item .ui-menu-item-wrapper:focus
但没有成功。我正在使用 jquery ui 1.12.1 和 jquery 1.10.2。如何在这两个事件中获得我想要的背景颜色和文本颜色?
提前致谢。
我找到了对此负责的类。查看 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;
}
现在我使用箭头键在列表中悬停或导航时具有相同的效果。