Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Установка цвета через функцию .css() сбрасывает цвет для :hover (https://javascript.ru/forum/jquery/28095-ustanovka-cveta-cherez-funkciyu-css-sbrasyvaet-cvet-dlya-hover.html)

xintrea 07.05.2012 14:08

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


Никак не могу побороть такую проблему. Есть у меня элемент 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 07.05.2012 18:21

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

Amphiluke 07.05.2012 18:24

Цитата:

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

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

Amphiluke 07.05.2012 18:31

А решение проблемы, озвученной ТС, простое: можно вместо использования метода .css() присваивать объекту новый класс
.js-class { background-color:#00FF00; }

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

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

nero333 18.08.2012 14:38

Мне нужно определить значение цвета фона, которое ссылка приобретает при наведении. Из 1-го сообщения темы, чтобы определить цвет ссылки делаем так:
alert($('.sel_cell').css('background-color')) // выведется пустая строка, т.к. цвет неопределен

А как определить цвет при наведении? Так не работает:
alert($('.sel_cell').css('background-color:hover')) // хотелось бы, чтобы вывелось #F01010


Часовой пояс GMT +3, время: 22:34.