Изменить цвет фона элемента списка из автоматически сгенерированного раскрывающегося списка при наведении курсора мыши

Я использую в своем проекте twitter typeahead.

Как показано в этом примере, мне нужно мое предложение элементы списка имеют другой цвет фона, когда я навожу указатель мыши на список предложений в раскрывающемся списке. Параметры, перечисленные в раскрывающемся списке, даже не кажутся гиперссылками (не отображается значок руки, когда мышь перемещается по списку предложений в раскрывающемся списке).

Насколько я понимаю, мне не нужен пользовательский шаблон, чтобы эта функция работала. Он встроен в twitter typehead. Пользовательские шаблоны пригодятся, если я хочу настроить его помимо основных доступных функций.

Вот мой код.

`<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>`

Наконец, вот мой formcontrol для typeahead.

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

Пожалуйста, дайте мне знать, что мне не хватает.


person JavaProgrammer    schedule 29.03.2015    source источник
comment
Вам нужно, чтобы каждый элемент списка был другого цвета? или вы просто хотите оформить все элементы списка другим цветом?   -  person    schedule 29.03.2015
comment
Итак, раскрывающийся список открывается, когда я печатаю список предложений. Допустим, я перемещаю мышь по этим параметрам, я хочу, чтобы цвет фона параметра, на котором находится мышь, был синим. Так же, как и с образцом под URL-адресом — tutorialrepublic .com/   -  person JavaProgrammer    schedule 29.03.2015
comment
Вам нужно добавить стиль к .tt-is-under-cursor в вашей таблице стилей. Этот класс генерируется при наведении курсора на элемент   -  person    schedule 29.03.2015
comment
Извиняюсь. Я только что заметил, что не упомянул свои классы CSS в описании проблемы. Да. Я определил .tt-is-under-cursor на своей странице. Не понимаю, почему его никогда не берут.   -  person JavaProgrammer    schedule 29.03.2015


Ответы (2)


возможно, класс не назван tt-is-under-cursor...

Следуя этому, он был переименован в tt-cursor

Когда конечный пользователь наводит курсор мыши или нажимает на предложение .tt, к нему добавляется класс tt-cursor. Вы можете использовать этот класс как хук для стилизации состояния подсказок "под курсором".

person Anfuca    schedule 29.03.2015
comment
Вот и все!!!!!! Это решает мою проблему. Спасибо большое Анфука!!! Вы сделали мой день! Все, что для этого потребовалось, — это определение класса для tt-cursor. Класс css обновляется следующим образом .tt-suggestion.tt-cursor { background-color: #0097CF !important; color: #FFFFFF !important; } Это решило проблему! - person JavaProgrammer; 29.03.2015

класс .tt-is-under-cursor добавляется при наведении курсора на элемент, поэтому все, что вам нужно сделать в вашем css, это добавить это:

.tt-suggestion.tt-is-under-cursor{
    background-color: blue;
}
person Tomer    schedule 29.03.2015
comment
Я отредактировал описание проблемы и добавил классы css, которые я изначально пропустил в своем посте. Да. У меня есть этот класс определен. Но я все еще не получаю цвет фона, определенный в классе tt-is-under-cursor. - person JavaProgrammer; 29.03.2015
comment
добавьте !important;, у вас могут быть таблицы стилей в неправильном порядке - person ; 29.03.2015
comment
@gerdi, я думаю, ты имел в виду !важно. Я не уверен, куда я должен добавить это, но вот что я сделал. '.tt-suggestion.tt-is-under-cursor { background-color: #0097CF!important; цвет: #FFFFFF!важно; }` Все еще не повезло - person JavaProgrammer; 29.03.2015
comment
я надеюсь, вы не закодировали и не вставили мою опечатку, потому что она там написана с ошибкой;) - person ; 29.03.2015
comment
Нет. Я пытался !важно. Мой класс css обновляется следующим образом: .tt-suggestion.tt-is-under-cursor { background-color: #0097CF!important; color: #FFFFFF!important; } . Без изменений. - person JavaProgrammer; 29.03.2015
comment
Ребята, мои данные поступают с удаленного URL. Когда я просматриваю исходный код, я не вижу, чтобы этот класс был добавлен ни к одному параметру в раскрывающемся списке typeahead. Я ожидаю увидеть класс в раскрывающемся списке, когда я просматриваю исходный код. Я не уверен, чего не хватает и почему он не добавил бы этот класс css в список предложений. - person JavaProgrammer; 29.03.2015
comment
В исходном коде вы получаете статическое представление страницы, поэтому вы не увидите добавленные классы (поскольку они добавляются динамически при наведении курсора на элемент), вам нужно использовать «проверить элемент» - person Tomer; 29.03.2015
comment
@fatman, Спасибо! Я попытался проверить элемент и навел курсор на опцию предложения, когда элемент проверки в хроме был открыт, я не вижу этот класс. Когда я печатаю, я вижу, что элемент с классом tt-query мигает. Но это все. Я нигде не вижу tt-is-under-cursor. Я наверняка что-то упускаю. - person JavaProgrammer; 29.03.2015