13

目标是创建一个 JQuery 自动完成元素，其列表项在通过键盘悬停或聚焦时具有蓝色背景。Facebook 搜索框很好地实现了这一点。

每个<li>元素都包含用<a>. 这些<a>标签中的每一个都属于 class 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 选择器不应过于宽泛。

4

10 回答 10

24

This work quite easy 

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> */
}
于 2013-10-31T21:06:27.337 回答
12

悬停的 css 变成了这个 css 类 在此处输入图像描述

你可以覆盖它。例如：

.ui-state-focus {
background: none !important;
background-color: blue !important;
border: none !important;}
于 2015-06-17T19:16:46.413 回答
12

我通过以下方式更改了颜色：

.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 {
}
于 2017-02-25T22:28:18.467 回答
7

这改变了我的悬停颜色。

.ui-menu-item .ui-menu-item-wrapper:hover
{
    border: none !important;
    background-color: #your-color;
}
于 2016-07-27T02:35:54.430 回答
3

我使用了上面的答案并稍作调整以适用于我的场景（JQuery 自动完成项的悬停样式）。希望这可以帮助某人。

.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
    background: #6693bc !important;
    font-weight: bold !important;
    color: #ffffff !important;
}
于 2018-06-21T15:51:04.770 回答
1

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

.ui-autocomplete-input:focus, .ui-autocomplete a.ui-corner-all.sbiAnchor:hover {
    background: blue;
}
于 2013-02-21T01:23:38.823 回答
0

花了一段时间才弄明白，但正确的 CSS 代码是：

.ui-menu .ui-menu-item a.sbiAnchor.ui-state-hover{
    background: blue;
}

这会用一块石头杀死两只鸟，为悬停和通过上/下键击选择提供蓝色背景。jQuery 自动完成元素显然将向上/向下击键视为“悬停”动作，而不是选择或焦点。

于 2013-02-21T20:32:43.147 回答
0

使用.ui-menu-item和ui-menu-item-wrapper.ui-state-active：

.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
  background: #f5f5f5 !important; 
  border: solid 1px transparent; 
}
于 2020-08-16T00:33:08.473 回答
0

这是正确的答案：只需将“灰色”更改为您想要的颜色

.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: none!important;
	background: grey;
	font-weight: normal;
	color: #ffffff;
}

于 2018-02-21T14:42:47.820 回答
0

这么老的话题，但上面的解决方案对我不起作用。如果我直接前进，我会更快地找到解决方案：

在您的自定义样式表中覆盖以下样式的 jquery-ui.css

.ui-autocomplete {
            border-radius: 0.25rem;
            background-color: #eceff1;
            padding: 0 0.6rem;
            font-family: 'ptmono';
        .ui-menu-item {
            border: 1px solid #eceff1;
            border-radius: 0.25rem;
            .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 {
            background-color: #eceff1;
            border-color: #eceff1;
            color: #0d47a1;
            }
        }
    }

除了 background: none !important，您可以在 .ui-menu-item 和活动类中设置背景。另外，不要写边框：无！重要的是，您在两个类中都用背景颜色覆盖边框颜色，这是防止高度变化和摆动效果的原因。

于 2017-05-02T14:44:34.397 回答