多個懸停狀態存在問題-不知道是相鄰選擇器還是同級選擇器？

Question

總是讓我不解的小事。 我試圖將鼠標懸停在導航元素效果3個元素上。 背景顏色，文本顏色和文本下方的小箭頭。

背景顏色很容易，但是只有當您將鼠標懸停在實際文本上時，文本顏色才會更改-而不是整個塊元素（由背景顏色構成）。 另外，我也想對文字下方的小箭頭進行圖像交換。 例：

這是網站：

MACI測試網站

我已經閱讀了相鄰的和同級的選擇器-但是我無法完全按照自己的意願去做。 這可能確實很明顯，但目前看不到！ 任何幫助，將不勝感激 ：）

Answer 1

將顏色放在鏈接上而不是li上，並使鏈接成為塊元素以填充li區域：

ul.menu a {
    display:block;
    background-color:#FFFFFF;
}
ul.menu a:hover {
    background-color:#AE242A;
    color:#FFFFFF;
}

另外，您可以將箭頭圖像作為鏈接的非重復背景圖像，並為常規鏈接和懸停鏈接設置不同的箭頭圖像。

另一個想法，您是否嘗試過：

ul.menu li.nav-links:hover a.nav {
    color:#FFFFFF;
}