jQuery自动完成悬停样式

jQuery autocomplete hover styling

本文关键字：悬停 样式 jQuery      更新时间：2023-09-26

当项目被悬停时，我试图更改自动完成的背景色，但我无法使其工作。我设法用.ui-menu-item a改变了一般的背景颜色，并尝试使用:hover、:focus、:active，但它们都不起作用。有人能告诉我做这件事的合适班级是什么吗？

CSS:

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

在我的例子中，下面的代码对我有用。希望它能帮助到一些人。

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

悬停的自动完成项将应用类ui-state-focus，因此您可以通过CSS将它们定位为：

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

jsFiddle示例

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

我能让它工作的唯一方法是打开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;
}

似乎对我很有效。更改后，您可能需要关闭并重新打开浏览器。

我之所以这么做，是因为其他建议似乎都不适合我。发布这篇文章可能会帮助其他遇到同样问题的人。。

相关文章：