Переключение фонового изображения с помощью jquery

Question

Немного новичка jQuery, пытающегося заставить что-то работать. По сути, у меня есть div с классом .nav, и внутри него есть список навигации. Я хочу изменить background-image из .nav при наведении курсора на элемент в списке навигации. Вот мое неудачное усилие:

$(function(){
    $("li#hover-first").mouseover(function(){
        $("div.nav").removeClass("nav").addClass("navbg");
            .mouseout(function(){$("div.nav").removeClass("navbg").addClass("nav");
    });

Идея состоит в том, что как только первый элемент li наведен на элемент div с классом .nav, его класс будет удален и добавлен .navbg (который имеет альтернативное фоновое изображение). Очевидно, что это не работает, поэтому любая помощь будет принята с благодарностью ... спасибо.

Answer 1

И SLaks, и Nick правильно указывают, что вы можете использовать метод hover вместо mouseover и mouseout. Тем не менее, это больше для удобства и не должно иметь большого значения. Документация JQuery даже говорит ...

Вызов $ (селектор) .hover (handlerIn, handlerOut) является сокращением для: $ (Селектор) .mouseenter (handlerIn) .mouseleave (handlerOut);

Метод toggleClass аналогичен удобству.

Я вижу две реальные проблемы с вашим существующим кодом. Первый указывается и исправляется Ником, и это его модифицированный селектор.

Главное изменение в том, что вам нужно Селектор div.navbg также, потому что когда вы зависаете в настоящее время быть

, так div.nav больше не соответствует ему.

Вторая проблема, которую я вижу, состоит в том, что вы не заканчиваете свои функции. Ник и Слэкс не упоминают об этом, но обращаются, потому что их ответы написаны по-разному.

Если бы по какой-то причине вы не хотели использовать hover и toggleClass, ваш исправленный код мог бы выглядеть следующим образом:

$(function(){    
    $("li#hover-first").mouseover(function(){
        $("div.nav").removeClass("nav").addClass("navbg");
    }).mouseout(function(){
        $("div.navbg").removeClass("navbg").addClass("nav");
    });
});

Answer 2

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

$("li#hover-first").hover(
    function() { $("div.nav").removeClass("nav").addClass("navbg"); },
    function() { $("div.nav").removeClass("navbg").addClass("nav"); }
);

Answer 3

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

$("li#hover-first").hover(function() {
  $("div.nav, div.navbg").toggleClass("nav navbg");
});

Основным изменением является то, что вам также нужен селектор div.navbg, потому что когда вы зависаете, он в настоящее время будет <div class="navbg">, поэтому div.nav больше не соответствует ему. .toggleClass() с разделением пробела просто переключает оба класса, в этом случае эффективно меняя их местами.

Answer 4

попробовать:

$("div.nav").css("background", "backgroundImage.jpg");

просто замените "backgroundImage.jpg" на любое значение, которое вы хотите установить для значения background css, так же, как если бы оно было определено в таблице стилей css.