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

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

它工作得很好，但点击后，我将我的鼠标指针从菜单区域和悬停行动呼吁！所以这部分菜单是不重要的！

有什么可以指导我吗？

来源

2009-10-04 Ockonal

与其设置单个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-04 21:17:26 belugabob

+1 - 我认为这就是我困惑的心灵正在努力的方向。 – karim79 2009-10-04 21:20:29

对不起，长时间回复，我无法测试此代码。谢谢，它工作正常。 – Ockonal 2009-10-05 13:35:05

你也可以考虑把一个！重要的后css规则选定，所以它会ovverride悬停规则。（使用上述解决方案）。

来源

2009-10-04 21:27:40 CodeJoust

好的，谢谢你的建议。 – Ockonal 2009-10-05 13:36:20

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

回答

相关问题