Question

我正在尝试制作像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

Twitter顶级菜单悬停更改颜色

1 个答案: