將鼠標懸停在子元素上時更改父元素的顏色

Question

我有一個大型菜單，當將鼠標懸停在父菜單上時將顯示drop0下拉菜單，當將鼠標懸停在下拉子菜單上時，它將顯示與dd-panel類相關的容器div中與菜單相關的信息

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

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

當將鼠標懸停在圖像或文本上時，我希望活動菜單的背景/前景色為綠色/白色。

小提琴的鏈接

我嘗試使用以下jquery將字體的顏色保持為黃色，以供其他人查看是否可行。 但這是行不通的。

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

在孔大型菜單的視圖。 我希望菜單的功能類似於現在的小提琴，但我希望采用更專業的編碼方法。 到目前為止，我一直在堆棧用戶的幫助下進行管理，因為我不是設計者或jquery用戶的專家，我更像是后端開發人員。 因此，在這方面的任何幫助都將受到高度贊賞。

更新：

當我使用$(this).parent(".dropdown ul li").css("border", "2px red solid"); 它起作用並在周圍添加無聊

但是當我使用$(this).parent(".dropdown ul li a").css("color", "red"); 它確實起作用了

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"); 才不是。