在鼠标悬停状态下从自动生成的下拉列表更改列表项的背景颜色

Question

我在我的项目中使用 twitter typeahead。

如图this example 当我将鼠标移到下拉列表中的建议列表上时，我需要我的建议列表项具有不同的背景颜色。下拉列表中列出的选项甚至看起来都不像超链接（当鼠标移到下拉列表中的建议列表上时不显示手形图标）。

据我所知，我不需要自定义模板来使此功能正常工作。它内置于 Twitter typeahead 中。如果我想在可用的基本功能之外对其进行自定义，自定义模板会派上用场。

这是我的代码。

`<script type="text/javascript">
var users = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'),
queryTokenizer: Bloodhound.tokenizers.whitespace, 
limit: 10,
remote: '/some/remoteurl?name=%QUERY'
});
users.initialize();
$('input.typeahead').typeahead({
highlight: true,
}, {
name: 'users',
displayKey: 'name',
source: users.ttAdapter()
});
</script>`

HTML如下。

`<style type="text/css">
.typeahead, .tt-query, .tt-hint {
    border: 2px solid #CCCCCC;
    border-radius: 8px;
    font-size: 16px;
    font-family:sans-serif;
    height: 30px;
    line-height: 16px;
    outline: medium none;
    padding: 3px 20px;
    width: 180px;
}
.typeahead {
    background-color: #FFFFFF;
}
.typeahead:focus {
    border: 2px solid #0097CF;
}
.tt-query {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.tt-hint {
    color: #999999;
}
.tt-dropdown-menu {
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    margin-top: 12px;
    padding: 4px 0;
    width: 180px;
}
.tt-suggestion {
    font-size: 16px;
    font-family:sans-serif;
    text-align: left;
    line-height: 16px;
    padding: 3px 20px;
    width: 180px;
}
.tt-suggestion.tt-is-under-cursor {
    background-color: #0097CF;
    color: #FFFFFF;
}
.tt-suggestion p {
    margin: 0;
}

</style>`

最后，这是我的预输入表单控件。

`<div class='container-fluid' id="searchUsersDiv">
<input type="text" placeholder="First or Last Name" class="typeahead 
tt-query" ></div>`

请让我知道我缺少什么。

Answer 1

悬停元素时会添加 class .tt-is-under-cursor，因此您需要在 css 中添加以下内容：

.tt-suggestion.tt-is-under-cursor{
    background-color: blue;
}

Answer 2

也许 class 没有命名 tt-is-under-cursor...

继 this 之后，已重命名为 tt-cursor

When an end-user mouses or keys over a .tt-suggestion, the class tt-cursor will be added to it. You can use this class as a hook for styling the "under cursor" state of suggestions.

在鼠标悬停状态下从自动生成的下拉列表更改列表项的背景颜色

Change background colour of list item from auto-generated dropdown on mouseover state

html

css

jquery

twitter-typeahead