懸停上的側欄更改類別背景色（jsFiddle）

我正在爲我的網站開發一個側欄。當用戶懸停在某個類別上時，打開一個子菜單，當用戶將鼠標懸停在該子菜單上時，我希望相應的類別背景顏色發生更改。我創建了一個jsfiddle來幫助說明我的問題。我感謝在這方面的任何幫助。懸停上的側欄更改類別背景色（jsFiddle）

我想沿着線的東西：

$(".sidemenu").hover(function(){ 
    $("category").closest().parent().css("background-color","red"); 
});

這裏是的jsfiddle

http://jsfiddle.net/ahren/BGcDc/8/

來源

2012-06-06 AnchovyLegend

我剛纔編輯你的CSS來background colour改變家長white。編輯的代碼是在這裏：

$(".category").hover(function() { 
    $(".submenu").hide(); 
    $(this).find(".submenu").show().parent().css('background', '#fff'); 
    $(this).find(".submenu li:eq(0)").css("border-top", "1px solid blue"); 
    $(this).find(".submenu li:last").css("border-bottom", "1px solid blue"); 
    $(this).find(".submenu li:first").css("border-left", "none"); 
    $(this).css("border-bottom", "none"); 
    $(this).css("width", "205px"); 
    $(this).css("border", "1px solid blue"); 
    $(this).css("border-top", "1px solid blue"); 
    $(this).css("border-right", "none"); 
}); 
$(".category:last").css("border-bottom", "1px solid grey"); 
$(".category").mouseleave(function() { 
    $(this).css("background-color", "#eee"); 
    $(this).css("border", "1px solid grey"); 
    $(this).css("border-bottom", "none"); 
    $(this).css("width", "180px"); 
    $(".category:last").css("border-bottom", "1px solid grey"); 
}); 
$(".submenu,#sidebar").mouseleave(function() { 
    $(".submenu").hide(); 
    $(".category").css("width", "180px"); 
});

還可以找到的CSS下同：

.category{text-decoration:none; border:1px solid grey; border-bottom:none; width:180px; padding:3px 8px 4px 30px; background-color:#eee;} 
.submenu{list-style-type:none; background-color:#eee; width:200px; position:absolute; display:none; margin-left:189px; margin-top:-24px; box-shadow:4px 4px 9px #333;} 
.submenu li{padding:3px 8px 4px 10px; border-left:1px solid blue; border-right:1px solid blue; border-top:1px solid #bbb; border-bottom:none; margin-left:0px; background: #fff;}

希望這有助於。 :)

來源

2012-06-06 18:56:57

謝謝！正是我所期待的。 – AnchovyLegend

當然...這是您的參考小提琴：http://jsfiddle.net/BGcDc/35/我已經在css中添加了子菜單的背景顏色爲白色。如果有幫助，請接受我的回答。謝謝。 –

這應該這樣做

$(".submenu li").mouseenter(function() { 
    $(this).parent().parent().css("background-color","yellow"); 

});

來源

2012-06-06 18:58:36 Dancrumb

感謝您的回覆，此解決方案也適用。 – AnchovyLegend

嘗試在$(".category").hover();功能添加此$(this).css('background-color','red');。由於您多次使用$(this)，您應該嘗試將其緩存在變量中以獲得最佳實踐。

來源

2012-06-06 18:59:45 maksbd19

感謝您的建議。 – AnchovyLegend

懸停上的側欄更改類別背景色（jsFiddle）

回答

相關問題