Question

我有一个菜单和jquery-code，它在悬停时使背景图像不同。

       $('#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' );
});

它也可以正常工作，但点击后我从菜单区域和悬停动作调用中移动我的鼠标指针！所以这部分菜单没有被忽视！

你可以给我什么建议？

Answer 1

不要设置单独的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定义中最后出现的那个是生效的类。对我来说，检查这个有点深夜，但你可以交换这些类，看看哪种方式最好..

Answer 2

您还可以考虑在选择的css规则之后添加！important，这样它就会消除悬停规则。（使用上述解决方案）。

菜单 - 背景图像和悬停行动

2 个答案: