Question

所以这是我的代码：

ul.primary li:hover > a{
    transform:translate(7px,7px);
    -ms-transform:translate(7px,7px);
    -webkit-transform:translate(7px,7px);
}

我想只选择第一个“a”标签。它的菜单，我不希望下一个“ul li a”中的链接向下和向右翻译7 px。出于某种原因，当我尝试将子菜单的css更改为：

ul.sub li a:hover {
    -moz-transition: none;
    -webkit-transition: none;
    -o-transition: color 0 ease-in;
    transition: none;
}

过渡仍然存在。

这是菜单的html：

<div class="wrap">
<span class="decor"></span>
<nav>
  <ul class="primary">
    <li>
      <a href="">WORKS</a>
      <ul class="sub">
        <li><a href="">CERAMICS</a></li>
        <li><a href="">EXHIBITIONS</a></li>
        <li><a href="">OTHERWORKS</a></li>
      </ul>
    </li>
    <li>
      <a href="">PHOTOS</a>
    </li>
    <li>
      <a href="">OTHER PROJECTS</a>
      <ul class="sub">
        <li><a href="">INSTAGRAM FEED</a></li>
        <li><a href="">PUBLICATIONS</a></li>
        <li><a href="">WARDOBE DESIGN</a></li>
      </ul>  
    </li>
  </ul>
</nav>
</div>

Answer 1

解决了mmy问题：

ul.primary > li:hover > a

是正确的选择器。

Answer 2

您需要ul.primary li:first-child:hover > a和

ul.sub li:hover a {
    -moz-transition: none;
    -webkit-transition: none;
    -o-transition: color 0 ease-in;
    transition: none;
}

在悬停时只选择css中的第一个子节点

2 个答案: