Селектор hover CSS для фонового цвета не работает после динамического изменения фонового цвета с помощью jquery

Я динамически меняю цвет фона div с помощью метода jquery .css(). Я также хочу иметь селектор CSS hover на том же div, который меняет цвет фона. По-видимому, перед изменением цвета с помощью jquery работает селектор CSS hover, но после изменения div с помощью метода jquery селектор CSS hover больше не работает. Есть ли способ обойти это (без использования метода jquery hover)?

Это пример того, о чем я говорю: http://jsfiddle.net/KVmCt/1/

Ответы

Ответ 1

Проблема, с которой вы столкнулись, заключается в важности расположения информации CSS:

Внешняя таблица стилей переопределяется CSS в начале документа; который, в свою очередь, чрезмерно управляется CSS в атрибуте style элемента. В основном, последний стиль, используемый браузером, отменяет любые ранее заданные и в противном случае конфликтующие правила (если не используется ключевое слово !important).

В качестве JavaScript и, следовательно, jQuery помещает его информацию о стилях CSS/в атрибут style в строке, который всегда перекрывает конфликтующие стили, указанные в другом месте.

Места более важны для color: red для div, не считая стилей div:hover.

Чтобы обойти это, вы можете использовать:

div:hover {
    background-color: blue!important;
}

JS Fiddle demo.

Лучшее решение, однако, состоит в том, чтобы избежать назначения background-color/других стилей с помощью jQuery и просто использовать CSS:

div {
    background-color: red;
}

div:hover {
    background-color: blue!important;
}

В качестве альтернативы вы можете использовать метод jQuery hover():

$('div').css('background-color','red').hover(
    function(){
        $(this).css('background-color','blue');
    },
    function(){
        $(this).css('background-color','red');
    });

JS Fiddle demo.

Ответ 2

Метод jquery css добавляет встроенный стиль к вашим элементам, а это означает, что после его выполнения ваш div будет выглядеть как

<div style="background-color: red">Hello world</div>`

Теперь встроенный стиль всегда имеет больше приоритета, чем стиль CSS, поэтому ваша проблема.

Итак, почему бы не добавить класс css вместо использования встроенного стиля? Попробуйте следующее:

$("div").addClass("edited");

и

div:hover, div.edited:hover {
   background-color: blue;
}

div.edited {
   background-color: red;
}

и вы увидите, что он работает.

Ответ 3

Когда вы манипулируете css с jQuery, он добавляет его inline и переопределяет любой css в таблице стилей, используя jquery для добавления и удаления класса, который изменяет цвет при наведении. Здесь рабочая скрипка: http://jsfiddle.net/KVmCt/6/

jQuery выглядит следующим образом:

$("div").hover(
function(){
$(this).addClass("blue");
 }
,
function(){
$(this).removeClass("blue");
});

Ответ 4

если вам просто нужно удалить встроенный стиль, который вы можете использовать

$("#yourselector").attr("style", " ");

Он заменит ваш встроенный стиль style=" "

Ответ 5

Простым способом было бы добавить важный тег в ваш CSS.

div:hover {
    background-color: blue !important;
};