菜單 - 背景圖像和懸停動作

我有一個菜單和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

菜單 - 背景圖像和懸停動作

回答

相關問題