結合jQuery的效果

我有2個不同的jQuery效果我想應用到窗體單選按鈕，一方面我有按鈕的懸停效果，另一方面我有選定的無線電的背景顏色變化。下面的代碼：結合jQuery的效果

懸停：

$(".label_radio").hover(function() { 
    $(this).css("background-color", "silver"); 
},function() { 
    $(this).css("background-color", "transparent"); 
});

對於選定的項目：

$("#uno").click(function() { 
    $("#cambiar").css("background-image", "url(../wp-content/uploads/blanco2patas.jpg)"); 
    $("#BU").css("background", "red"); 
    $("#BT").css("background", "transparent"); 
    $("#NU").css("background", "transparent"); 
    $("#NT").css("background", "transparent"); 
}); 
$("#dos").click(function() { 
    $("#cambiar").css("background-image", "url(../wp-content/uploads/blanco4patas.jpg)"); 
    $("#BU").css("background", "transparent"); 
    $("#BT").css("background", "red"); 
    $("#NU").css("background", "transparent"); 
    $("#NT").css("background", "transparent"); 
}); 
$("#tres").click(function() { 
    $("#cambiar").css("background-image", "url(../wp-content/uploads/negro2patas.jpg)"); 
    $("#BU").css("background", "transparent"); 
    $("#BT").css("background", "transparent"); 
    $("#NU").css("background", "red"); 
    $("#NT").css("background", "transparent"); 
}); 
$("#cuatro").click(function() { 
    $("#cambiar").css("background-image", "url(../wp-content/uploads/negro4patas.jpg)"); 
    $("#BU").css("background", "transparent"); 
    $("#BT").css("background", "transparent"); 
    $("#NU").css("background", "transparent"); 
    $("#NT").css("background", "red"); 
});

我的問題是，當我嘗試申請懸停效果，當我得到我的鼠標選定元素會觸發懸停效果，但是當我移除鼠標時，它不會顯示選定的效果。它應該保持紅色，但我得到透明元素

來源

2013-05-16 user2389633

問題是什麼？ – Maresh

請把這個「陳述」寫成某種問題，因爲它代表着，這不是一個問題。 –

這裏有一點代碼味道。

你一遍又一遍地重複相同的功能，而不是使用上下文選擇器（即this關鍵字）

所以不是UNO，確實，特雷斯，誇 - 這兩者都是多餘的（您可以用指定一個使用:nth-child選擇器的特定元素）而不是語義 - 您應該爲該類使用一個類，併爲該類使用一個事件偵聽器，並使用this關鍵字查找單擊的元素。

喜歡的東西：

$(".myClass").click(function() { 

    clicked_el = $(this); 

    // then do something with clicked element (e.g. clicked_el.show()) 

});

編輯：至於你的問題，你明確地告訴了jQuery使用transparent背景上mouseleave（hover僅僅是一個方便的功能，結合兩個相關事件：mouseenter和mouseleave）。

這款定型（即先銀mouseenter，然後將透明mouseleave）取代您background:red

如果您希望保留紅色選擇的背景你應該再考慮不同的方法，如添加使用addClass()方法（記住this的上下文魔法）選擇元素，並在樣式表中爲該類定義CSS規則。這也是一個更爲語義的方式，因爲類名稱（例如selected_radio）反映了您比background:red;做得更好。

但這本身不足以解決您的問題，因爲您目前使用的內嵌樣式的懸停效果，它仍然將接管selected類優先通過覆蓋它與它的破碎重量。

因此，懸停影響應該由去除額外的造型要回默認被刪除，而不是說明一個積極的風格（background:transparent甚至background:none;是積極的語句），其覆蓋默認。

所以再次問自己：我真的需要JS的懸停效果還是它是一個矯枉過正的？爲什麼不使用CSS :hover僞選擇器？

來源

2013-05-16 11:12:00 Matanya

不知道，我會用我的表單試試這個，雖然它不是我想要的 – user2389633

它與hover僞選擇器一起工作，感謝您的幫助！ – user2389633

結合jQuery的效果

回答

相關問題