jQuery несколько эффектов при наведении (панель навигации) - PullRequest
Новая
       10

jQuery несколько эффектов при наведении (панель навигации)

0 голосов
/ 20 сентября 2010

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

$('#nav-list li.products').hover(
        function() { 
            $('#nav-list li.products ul').addClass("hover");
            $(this).css("background-image","url(img/products-hover.png)"); 

        },
        function() {
            $('ul', this).removeClass("hover");
            $(this).css("background-image","url(img/products.png)");
        }
    );

Этот код показывает только подменю, но не обновляет стиль главного меню.Как я могу добиться этого в JQuery?Спасибо!

1 Ответ

0 голосов
/ 04 марта 2011 
$(this).css("background-image","url(img/products-hover.png)");

Приведенный выше код добавит background-image: url(img/products-hover.png к DOM текущей веб-страницы.
Так что я предполагаю, что изображение img/products-hover.png может относиться к файлу CSS, но может не относиться к текущему URL.

Попробуйте использовать URL-адрес относительно корневого пути, например /img/products-hover.png, или я бы предпочел абсолютный путь в этом сценарии, например http://www.example.com/img/products-hover.png

Пример 

$('#nav-list li.products').hover(
        function() { 
            $('#nav-list li.products ul').addClass("hover");
            $(this).css("background-image","url(http://www.example.com/img/products-hover.png)"); 

        },
        function() {
            $('ul', this).removeClass("hover");
            $(this).css("background-image","url(http://www.example.com/img/products.png)");
        }
    );
...