问答详情
源自:6-8 CSS3 结构性伪类选择器—nth-child(n)

求解关于nth-child()和hover的连用问题

这两个选择器一起连用的表达式是怎样的?其实原本对我的导航定义了两种动画,想对奇数选项用rotate,偶数用translate,那要怎么用这个选择器实现呢?代码如下:

.nav ul li a{
      cursor:pointer; text-decoration:none;color:white;display: inline-block;
          -webkit-transition: all 0.5s ease-in;
          -moz-transition: all 0.5s ease-in;
          -o-transition: all 0.5s ease-in;
          -ms-transition: all 0.5s ease-in;
          transition: all 0.5s ease-in;
           }
.nav ul li a:hover{
      text-decoration:none;color:rgb(23,48,56);
      -webkit-transform:rotate(20deg);
          -moz-transform:rotate(20deg);
          -o-transform:rotate(20deg);
          -ms-transform:rotate(20deg);
          transform:rotate(20deg);
      -webkit-transform: translateY(10px);
      -moz-transform:translateY(10px);
      transform: translateY(10px);
        }

提问者:Setihex 2016-12-22 22:52

个回答

  • rainy_day
    2016-12-23 11:03:07
    已采纳

    你试试这样可以不:
    .nav ul li:nth-child(2n+1) a:hover

  • 什么逗
    2017-12-01 18:53:26

    .nav ul li:hover:nth-child(2n+1)将hover移到nth-child前面,亲自测有用

  • 风挽雨
    2016-12-23 11:13:14

    .nav ul li a:nth-child(2n+1):hove{...}