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

来源:6-8 CSS3 结构性伪类选择器—nth-child(n)

Setihex

2016-12-22 22:52

这两个选择器一起连用的表达式是怎样的?其实原本对我的导航定义了两种动画,想对奇数选项用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);
        }

写回答 关注

3回答

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

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

    rainy_... 回复Setihe...

    那就好 ^-^

    2016-12-23 13:28:19

    共 3 条回复 >

  • 什么逗
    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{...}

    Setihe...

    不行噢,这个试了没效

    2016-12-23 12:18:24

    共 1 条回复 >

十天精通CSS3

本课程为CSS3入门教程,深刻详解CSS3知识让网页穿上绚丽装备

242555 学习 · 2623 问题

查看课程

相似问题