Установка цвета через функцию .css() сбрасывает цвет для :hover

[xintrea]

Здравствуйте!


Никак не могу побороть такую проблему. Есть у меня элемент sel_cell, для которого в CSS прописан обычный вид, и hover вид:

.sel_cell {
 border: 0px;
 width: 16px;
 height: 16px;
}

.sel_cell:hover {
 border: 0px;
 width: 16px;
 height: 16px;
 background-color: #F01010;
}

<div id="lb_ed_selector_1" class="sel_cell">
 <img src="/pic/sel_cell_1.png" style="float: left;"/>
</div>

Проблема в том, что если этому элементу поменять background-color через JQuery, то оформление hover слетает:

$("#lb_ed_selector_1").css("background-color", "#00FF00");

После чего при наведении мышкой элемент перестает подсвечиваться.

Вопрос. Как установить через JQuery цвет фона так, чтобы не слетал уже настроеный цвет фона для hover?

Если невозможно это сделать, тогда вопрос в другом: как установить css-свойство для псевдокласса hover через JQuery? Не функцию hover() назначить, а именно css-свойство для псевдокласса hover установить?

[bot87]

background-color:#F0101F!important как вариант.

[Amphiluke]

Преоритет селекторов здесь играет роль.
Вы через квери задаете для айди свойство которое перекрывает свойство в классе

bot87, причем здесь id? Установка стилей через JavaScript (например, тем же методом .css()) задает «инлайновые» стили, как если бы они были прописаны в атрибуте style у тега. Такие стили имеют еще больший приоритет, чем прописанные в таблице стилей. Даже через селектор идентификатора.

[Amphiluke]

А решение проблемы, озвученной ТС, простое: можно вместо использования метода .css() присваивать объекту новый класс

.js-class { background-color:#00FF00; }

$("#lb_ed_selector_1").addClass("js-class");

при этом определение класса js-class должно располагаться ниже, чтобы правило «выигрывало» по каскаду.

[nero333]

Мне нужно определить значение цвета фона, которое ссылка приобретает при наведении. Из 1-го сообщения темы, чтобы определить цвет ссылки делаем так:

alert($('.sel_cell').css('background-color')) // выведется пустая строка, т.к. цвет неопределен

А как определить цвет при наведении? Так не работает:

alert($('.sel_cell').css('background-color:hover')) // хотелось бы, чтобы вывелось #F01010