Меню - фоновое изображение и действие при наведении - PullRequest
Новая
       22

Меню - фоновое изображение и действие при наведении

0 голосов
/ 05 октября 2009

У меня есть меню и jquery-код, который делает его фоновое изображение другим при наведении курсора. 

       $('#menu a').hover(function() {
            $(this).css( 'background', 'url(images/slider_bg_hover.png) repeat-x' );                     
       },function(){
            $(this).css( 'background', 'url(images/slider_bg.png) repeat-x' );
       });

Работает нормально, но теперь я хочу выделить выбранное меню: 

$('#menu a').click(function() {
   $(this).css( 'background', 'url(images/slider_bg_hover.png) repeat-x' );
});

Это тоже работает нормально, но после нажатия я перемещаю указатель мыши из области меню и вызовов hover-action! Так что эта часть меню не подсвечена!

Что ты можешь мне посоветовать?

Ответы [ 2 ]

2 голосов
/ 05 октября 2009

Вместо того, чтобы устанавливать отдельные атрибуты CSS, рассмотрите возможность использования классов.

Ваш пример потребует трех классов CSS (два из которых имеют одинаковое определение) 

.menu{
    background: url(images/slider_bg.png) repeat-x;
}

.hoverMenu, .selectedMenu{
    background: url(images/slider_bg_hover.png) repeat-x;
}


$('#menu a').hover(function() {
        $(this).addClass('menu');                     
   },function(){
        $(this).addClass( 'hoverMenu' );
   });

$('#menu a').click(function() {
   $('#menu a').removeClass( 'selectedMenu' );
   $(this).addClass('selectedMenu');
});

Когда у элемента есть два класса, которые конфликтуют друг с другом, я думаю, что тот, который идет последним, в определениях CSS, это тот, который вступает в силу. Это немного поздно для меня, чтобы проверить это, но вы можете поменять классы, чтобы посмотреть, какой путь работает лучше всего.

1 голос
/ 05 октября 2009

Вы также можете добавить! Важное после правила css для выбранного, чтобы оно переопределяло правило наведения. (Используя вышеуказанное решение).

...