Question

我正在尝试在项目悬停时更改自动填充的背景颜色，而我却无法让它工作。我设法使用.ui-menu-item a更改了常规背景颜色，并尝试使用:hover，:focus，:active，但没有一个能够解决问题。任何人都能告诉我正确的课程是做什么的吗？

CSS：

.ui-widget {
  font-size: 0.75em;
}
.ui-menu-item a {
  background-color: #fff;
}

Answer 1

我能让它工作的唯一方法是在IE中打开开发人员工具，看看被调用的内容是如何改变颜色的。我发现了这个：

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-state-active.ui-button:hover

所以，如果我将它添加到我的样式表中，我将使用覆盖类（要加载的最后一个样式表）：

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-state-active.ui-button:hover 
{
  border: 1px solid #000;
  background: #000;
}

似乎对我有用。您可能需要在进行更改后关闭并重新打开浏览器。

我使用了这个，因为其他任何建议似乎都不适合我。发布此信息可能有助于遇到同一问题的其他人。

Answer 2

悬停的自动填充项目会应用类ui-state-focus，因此您可以通过CSS将其定位到：

.ui-menu-item a.ui-state-focus {
/* your rules */
}

<强> jsFiddle example

请注意，较新版本的jQuery UI可能需要.ui-menu-item.ui-state-focus。

Answer 3

就我而言，以下代码对我有用。希望它可以帮助某人。

.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
    background: #6693bc !important;
    font-weight: bold !important;
    color: #ffffff !important;
}

jQuery自动完成悬停样式

3 个答案: