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

Question

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

背景颜色很简单，但文本颜色只会在您将鼠标悬停在实际文本上时发生变化 - 而不是整个 block 元素(由背景颜色框起来)。另外，我也想图像交换文本下方的小箭头。示例:

这是网站:

MACI test website

我已经阅读了相邻选择器和同级选择器 - 但我无法完全按照我的意愿进行操作。这可能真的很明显，但我暂时看不到!任何帮助将不胜感激:)

Answer 1

将颜色放在链接上而不是li上，并使链接成为 block 元素以填充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;
}