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

【问题标题】：Change color when hovering over li将鼠标悬停在 li 上时更改颜色
【发布时间】：2019-01-24 05:53:08
【问题描述】：

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

我现在使用的css代码：

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

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

【问题讨论】：

标签： html css wordpress css-selectors html-lists

【解决方案1】：

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

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

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

【讨论】：

感谢您的回答，正是我所需要的！ :)

【解决方案2】：

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

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

【讨论】：