javascript jQuery 自动完成悬停样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34091353/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery autocomplete hover styling
提问by eaglei22
I'm trying to change the background colour of the autocomplete when an item is being hovered and I just can't get it to work. I managed to change the general background colour with .ui-menu-item aand have tried to use :hover, :focus, :activebut none of them do the trick. Can anybody tell me what the right class is to do this?
当一个项目被悬停时，我试图改变自动完成的背景颜色，但我无法让它工作。我设法改变了一般的背景颜色，.ui-menu-item a并尝试使用:hover, :focus，:active但没有一个能成功。谁能告诉我正确的课程是什么？
CSS:
CSS：
.ui-widget {
font-size: 0.75em;
}
.ui-menu-item a {
background-color: #fff;
}
回答by Praveen Mitta
In my case following code worked for me. Hopefully it helps someone.
在我的情况下，以下代码对我有用。希望它可以帮助某人。
.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
background: #6693bc !important;
font-weight: bold !important;
color: #ffffff !important;
}
回答by j08691
Hovered autocomplete items get the class ui-state-focusapplied, so you can target them via CSS with:
悬停的自动完成项目会ui-state-focus应用该类，因此您可以通过 CSS 定位它们：
.ui-menu-item a.ui-state-focus {
/* your rules */
}
Note that newer versions of jQuery UI might need .ui-menu-item.ui-state-focusinstead.
请注意，可能需要使用较新版本的 jQuery UI .ui-menu-item.ui-state-focus。
回答by eaglei22
The only way I could get it to work was opening the developer tools in IE and seeing what was being called to change the colors. I found this:
我可以让它工作的唯一方法是在 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
so if I add this to my style sheet I am using to override classes (last style sheet to be loaded):
所以如果我将它添加到我的样式表中，我将使用覆盖类（要加载的最后一个样式表）：
.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;
}
seems to work well for me. You may need to close and reopen your browser after making the change.
似乎对我来说效果很好。进行更改后，您可能需要关闭并重新打开浏览器。
I resorted to this as none of the other suggestions seemed to work for me. Posting this as it may help someone else who runs into the same issue..
我求助于这个，因为其他建议似乎都不适合我。发布此信息，因为它可能会帮助遇到相同问题的其他人。
