css - CSS div:hover 每个菜单项有子和兄弟选择器问题

Question

网站： http ://avuedesigns.com/index

在首页上有 6 个菜单项。我想让每件物品在您翻阅时都有自己的颜色。

当您将鼠标悬停在 div 上时，这条线会将所有内容更改为白色

li#home-page.page-wrapper-li>div>div:hover .div-bg-color { background-color:#ffffff ;}

对于每个菜单项，我已经进去并给了他们 ID。当我尝试这个时：

 li#home-page.page-wrapper-li#front-page-menu-id-about>div:hover.div-bg-color {background-color:#765478 ;}

我认为它会起作用，因为我声明 >DIV>div:hover 而不是使用运算符。我究竟做错了什么？

Answer 1

试试这个，我认为你的选择器过于复杂。

#front-page-menu-id-graphic-design a {background: red ;}

我没有看到您的每个a标签的任何唯一 ID 或类。另外，我注意到您在多个元素上使用相同的 ID，这不是一个好主意。