CSS div：在每个菜单项上悬停，并有子选择器和同级选择器问题

地点：

首页上有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而不是使用操作符。我做错了什么？

试试这个，我觉得你把选择器复杂化了

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

---

我看不到每个

a

标记的唯一ID或类。另外，我注意到您在多个元素上使用相同的ID，这不是一个好主意。

您的第二行代码在一个

li

元素上似乎有两个ID，这是不允许的。查看该链接5秒钟后，开始感到头痛。别摇晃了！使用什么操作符？第二个选择器错误

li#home-page.page-wrapper-li#首页菜单id关于：hover>.div bg color{background color:#765478；}

，但我发现使用如此巨大的选择器是错误的。。。