多个悬停状态的问题 - 不确定相邻或兄弟选择器？

Question

总是让我脱离困境的小事。我试图在导航元素上悬停效果3个元素。背景颜色，文本颜色和文本下方的小箭头。

背景颜色很简单，但只有当您将鼠标悬停在实际文本上时，文本颜色才会更改 - 而不是整个块元素（由背景颜色框起）。此外，我想图像交换文本下方的小箭头。例如：

这是网站：

MACI test website

我已经阅读了相邻和兄弟选择器 - 但我无法完全按照自己的意愿行事。它可能非常明显，但我现在无法看到它！ 任何帮助将不胜感激：）

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;
}