jQuery изменение цвета или CSS?

Question

Я пытался добиться наведения / изменения цвета для определенного поля, но я думаю, что jQuery - это ответ. Я просмотрел несколько руководств по нажатию кнопок, но, возможно, я не просто вижу это или делаю это правильно.

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

Вот демо: http://www.notedls.com/demo

Answer 1

Используйте jQuery для добавления / удаления классов, которые задают стили. Это будет держать CSS отдельно от кода, что является лучшим решением, особенно если в этом участвуют дизайнеры.

Answer 2

Я вижу, что JQuery добавляет выбранный класс к элементу li при нажатии.В зависимости от того, что вы хотите сделать, вы можете закрасить выбранный цвет фона li.selected или нацелить div на элемент li.selected.

Answer 3

По соображениям доступности они должны быть созданы в виде набора тегов внутри списка. Это делается для того, чтобы вкладка «Считыватель экрана» / «Клавиатура» остановилась на гиперссылке.

Затем вы можете использовать псевдоклассы (состояния), такие как hover, в css, так что это будет работать, даже если скрипт отключен.

a:link {background-colorr:#FF0000;}      /* unvisited link */
a:visited {background-color:#00FF00;}  /* visited link */
a:hover {background-color:#FF00FF;}  /* mouse over link */
a:active {background-color:#0000FF;}  /* selected link */