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

【问题标题】：CSS div:hover per menu item having Child and Sibling Selectors issueCSS div:hover 每个菜单项有子和兄弟选择器问题
【发布时间】：2013-02-12 06:25:05
【问题描述】：

网站：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 而不是使用运算符。我做错了什么？

【问题讨论】：

您的第二行代码似乎在一个 li 元素上有 2 个 ID，这是不允许的。
看了那个链接5秒，开始头疼。停止摇晃！
使用什么操作符？
第二个选择器是错误的li#home-page.page-wrapper-li #front-page-menu-id-about:hover>.div-bg-color {background-color:#765478 ;} 但是我发现使用这么大的选择器是错误的......

标签： css css-selectors parent-child

【解决方案1】：

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

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

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

【讨论】：