将鼠标悬停在 li 上时更改颜色

Question

我正在编写一个简单的wordpress页面，并希望在将鼠标悬停在菜单栏上时更改菜单栏（右上角）的背景颜色。它在这个网站上：https://www.happylogo.be/。我通常只使用"添加额外的 css"来执行此操作，这只是一个 css 文件。奇怪的是，我相信我的选择器代码是正确的，因为当我添加"可见性：隐藏"时;它迅速消失，并在悬停在 li 项目上时再次出现。

我现在使用的 css 代码：

#menu-primary-coach li:hover{
   /*#menu-primary-coach is the id of the lu*/
   background-color: #c7143a !important;
}

但它不起作用。将鼠标悬停在菜单项上时如何更改背景颜色？

Answer 1

我注意到<li>内的<a>标签实际上用黑色覆盖了悬停状态。

#primary-nav ul li:hover > a, #sticky_menu li:hover > a {
    background-color: #000000;
}

您可以删除此样式，也可以将<a>的悬停状态设置为所需的颜色。

Answer 2

它是由这行 CSS 引起的。<li>内<a>上有一个悬停。由于页面使用的是 xhtml，因此悬停样式应该在<a>而不是<li>上。如果您使用HTML5，则可以在<li>上。

#primary-nav ul li:hover > a, #sticky_menu li:hover > a {
    background-color: #000000;
}