Цель состоит в том, чтобы создать элемент автозаполнения JQuery, элементы списка которого имеют синий фон, когда они зависают или фокусируются с клавиатуры. Окно поиска в Facebook отлично отделяет это.
Каждый элемент <li>
содержит пользовательский HTML, заключенный в <a>
. Каждый из этих тегов <a>
принадлежит классу sbiAnchor
. Генерирование синего фона при наведении можно успешно выполнить с помощью следующего CSS:
.ui-autocomplete a.ui-corner-all.sbiAnchor:hover{
background: blue;
}
Но как применить один и тот же синий фон, когда пользователь открывает вверх или вниз список автозаполнения. Изменение кода CSS на следующее не работает:
.ui-autocomplete a.ui-corner-all.sbiAnchor:hover, .ui-autocomplete .ui-state-focus a.ui-corner-all.sbiAnchor{
background: blue;
}
Какой правильный подход здесь? Имейте в виду, что этот синий фоновый эффект должен применяться только к одному конкретному автозаполнению на моей странице (некоторые из них существуют). Поэтому я использую sbiAnchor, чтобы отличать его элементы от других элементов автозаполнения. Другие автозаполнения должны сохранять поведение по умолчанию, поэтому селектора CSS не должны быть слишком широкими.