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

should instead be

.TopMenuCont ul li a:hover span .navCon

I think you misunderstand what the > selector does. X > Y selects an element Y that is a direct descendant of X.

Look here for more information on CSS Selectors:

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