菜单 - 背景图像和悬停动作答案

【问题标题】：Menu - background image and hover action菜单 - 背景图像和悬停动作
【发布时间】：2011-03-19 10:31:47
【问题描述】：

我有一个菜单和 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' );
});

它也可以正常工作，但是单击后我将鼠标指针从菜单区域和悬停动作调用中移动！所以菜单的那部分没有突出显示！

你有什么建议？

【问题讨论】：

标签： jquery events background highlighting

【解决方案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 定义中最后一个是生效的。我检查这个有点晚了，但你可以交换课程，看看哪种方式最有效..

【讨论】：

+1 - 我想这就是我困惑的头脑正在努力的方向。
抱歉回复太长，我无法测试这段代码。谢谢，它工作正常。

【解决方案2】：

您还可以考虑在 selected 的 css 规则之后放置一个 !important，这样它就会覆盖悬停规则。（使用上述解决方案）。

【讨论】：