如何设置jQuery UI的鼠标离开事件自动完成列表的样式?

时间:2014-12-12 10:32:53

标签: jquery css jquery-ui autocomplete

我创建了一个自动填充字段,我不想在出现的列表中使用jQuery UI的默认样式。我已经想出了如何为列表和悬停列表元素设置新的背景颜色。但鼠标离开事件似乎仍有一种风格。如何删除它或至少选择它?

我不希望该列表中有任何黄色。 ;)

我准备了一个小提琴:http://jsfiddle.net/3fay2w7g/

这是代码: HTML:

<input id="search_in_cmms">

CSS: //在jQuery UI样式表之后

.ui-autocomplete{
    background-color: #fff !important;
}

.ui-autocomplete .ui-menu-item:hover{
    background-color:  #2ea2cc !important;
    background-image: none;
    color: #fff;
    border: none;
}

使用Javascript:

    var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
    ];
    $('#search_in_cmms').autocomplete({
        source: availableTags
    });

1 个答案:

答案 0 :(得分:2)

它是ui-state-focus类:

.ui-autocomplete .ui-menu-item:hover,
.ui-autocomplete .ui-menu-item.ui-state-focus{
    background-color:  #2ea2cc !important;
    background-image: none;
    color: #fff;
    border: none;
}