根据状态更改jQuery自动完成项的背景颜色(使用CSS)

Question

目标是创建一个JQuery自动完成元素,当它们悬停在上面或通过键盘聚焦时,其列表项具有蓝色背景.Facebook搜索框很好地解决了这个问题.

每个<li>元素都包含一个自定义HTML <a>.每个<a>标签都属于该类sbiAnchor.使用以下CSS可以成功完成悬停时生成蓝色背景:

.ui-autocomplete a.ui-corner-all.sbiAnchor:hover{
    background: blue;
}

但是当用户键入/关闭自动完成列表时,如何应用相同的蓝色背景.将CSS代码更改为以下代码不起作用:

.ui-autocomplete a.ui-corner-all.sbiAnchor:hover, .ui-autocomplete .ui-state-focus a.ui-corner-all.sbiAnchor{
    background: blue;
}

这里的正确方法是什么？请记住,此蓝色背景效果应仅适用于我页面上的一个特定自动填充(其中一些存在).这就是我使用sbiAnchor将其项目与其他自动完成元素区分开来的原因.其他自动复合应保留其默认行为,因此CSS选择器不应过宽.

Answer 1

这项工作很容易

body .ui-autocomplete {
  /* font-family to all */
}

body .ui-autocomplete .ui-menu-item .ui-corner-all {
   /* all <a> */
}

body .ui-autocomplete .ui-menu-item .ui-state-focus {
   /* selected <a> */
}

Answer 2

悬停的CSS变成了这个css类

你可以覆盖它.例如:

.ui-state-focus {
background: none !important;
background-color: blue !important;
border: none !important;}

Answer 3

这改变了我的悬停颜色.

.ui-menu-item .ui-menu-item-wrapper:hover
{
    border: none !important;
    background-color: #your-color;
}

Answer 4

我改变了颜色:

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

Answer 5

输入字段而不是锚标记占据焦点。这应该有效。

.ui-autocomplete-input:focus, .ui-autocomplete a.ui-corner-all.sbiAnchor:hover {
    background: blue;
}