0

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

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

你能给我什么建议？

4

2 回答 2

2

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

于 2009-10-04T21:17:26.327 回答
1

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

于 2009-10-04T21:27:40.393 回答