2011-05-17 63 views
0

基本上,我想讓懸停工作,即使在點擊綁定後,但我將.image26和27設置爲默認背景。懸停首先起作用,但點擊後,因爲我將其重置爲默認值,所以不能再次使用。甚至在jquery綁定('click')之後使懸停工作?

對此有更好的方法嗎?如果我沒有將圖像的其餘部分放在默認位置,那麼它們都會被標記爲點擊。

工作樣品: http://jsfiddle.net/louiemiranda/RkM3t/

jQuery代碼:

$(".image22").bind("click", function(event){ 
    $(this).css("background-position", "0 100%"); 
    $('#package22').attr("checked", "checked"); 
    $('.image26').css("background-position", "0 0"); 
    $('.image27').css("background-position", "0 0"); 
    var cashcredit = $('#package22').val(); 
    $('#fyi').html(cashcredit); 
}); 

$(".image22").bind("mouseenter mouseleave", function(event){ 
    $(this).toggleClass("image22-selected"); 
}); 

任何幫助理解。謝謝!

回答

0

一旦你調用css設置background-position,即CSS屬性作爲內聯樣式,因此,在階級統治的收益優先級應用(你期望通過切換image22-selected類更改屬性)。

在切換類之前,您可以刪除background-position css屬性。這樣,沒有內聯風格會獲得優先權。

不過,我認爲實現這一目標的更明智的方法是使用另一個CSS類的名稱,如image22-hover並確定順序的規則:

image22 { 
    background-image: url(your-image-22); 
    background-position: 0 0; 
} 

image22-hover { 
    background-position: move to a grey version of the image. 
} 

image22-selected { 
    background-position: move to a selected version of the image. 
} 

image22-selected.image22-hover { 
    background-position: move to a grey-selected version of the image. 
} 

需要注意的是鏈接CSS類選擇(最後的選擇)在IE6中不起作用: http://www.ryanbrill.com/archives/multiple-classes-in-ie/