當鼠標懸停在子元素上時改變父元素的顏色

Question

我有一個超級菜單，當鼠標懸停在父菜單上時，顯示drop0down菜單，當鼠標懸停在下拉菜單上時，它將顯示菜單相關的信息，與類dd-panel

我改變了懸停爲綠色的子菜單的背景顏色，我希望它保持綠色，如果將光標移動到該特定菜單的文本或圖像上。

您還會注意到，當鼠標懸停在父菜單元素上時，我選擇/顯示下拉列表的第一個元素作爲默認元素。

當鼠標懸停在圖像或文本上時，我想要活動菜單的背景/前景顏色爲白色綠色/白色。

鏈接fiddle

我試着用以下的jQuery的字體的顏色保持黃色FO RTEST人，看看它是否工作。但它不起作用。

$(".dd-panel").hover(function() { 
    $(this).closest("a").toggleClass("menuActive") 
}); 

孔超大菜單的視圖。我希望菜單的功能類似於現在在小提琴上的功能，但我希望更專業的編碼方法。我到目前爲止在堆棧用戶的幫助下進行了管理，因爲我不是設計師或jQuery用戶的專家，我更像是後端開發人員。因此，在這方面的任何幫助，高度讚賞。

UPDATE：

當我使用$(this).parent(".dropdown ul li").css("border", "2px red solid");它的工作原理，並添加的boredr各地

但是當我使用 $(this).parent(".dropdown ul li a").css("color", "red");它doent的工作

Answer 1

你<a>標籤是你.dd-panel的兄弟標籤，不你的父母標籤。

你應該試試這個：

$(".dd-panel").hover(function() { 
    $(this).prev("a").toggleClass("menuActive"); 
}); 

這應該正確地切換你的類。

這也是爲什麼$(this).parent(".dropdown ul li").css("border", "2px red solid");工作和$(this).parent(".dropdown ul li a").css("color", "red");不工作的原因。