html - Twitter 顶部菜单悬停更改颜色

Question

我正在尝试制作一个像 twitter 黑色的菜单栏，但是在 twitter 中，当你将鼠标悬停在连接上或从顶部菜单中发现时，链接文本变成白色，同时照片图标也变成白色，到目前为止它对我不起作用我不知道为什么这里是 HTML 代码

  <div class="TopMenu">
     <div class="TopMenuCont">
      <ul>
      <li class="mainNav">
      <a href="#" class="Connect">
      <span>
      <i class="navCon"></i>
      </span>
      Connect
      </a>
      </li>
      </ul>
     </div>
  </div>
</body>
</html>

这里是 Css

.TopMenuCont ul li a span .navCon
{
    background-position:-80px -50px;
}

.TopMenuCont ul li .Connect
{
 color: #BBBBBB;
    display: block;
    font-weight: bold;
    height: 12px;
    line-height: 1;
    padding: 13px 12px 15px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);
    background:none;
    box-shadow:0 0 0 rgba(0, 0, 0, 0) inset
}

.TopMenuCont ul li a:hover
{
    color:#ffffff;
}

.TopMenuCont ul li a:hover > .TopMenu .TopMenuCont ul li a span .navCon
{
    background-position:-80px -80px;
}

最后一行是问题所在

Answer 1

.TopMenuCont ul li a:hover > .TopMenu .TopMenuCont ul li a span .navCon

应该是

.TopMenuCont ul li a:hover span .navCon

我认为您误解了 > 选择器的作用。 X > Y 选择元素 Y，它是 X 的直接后代。

在此处查看有关 CSS 选择器的更多信息:

http://www.w3.org/TR/CSS2/selector.html