问答详情
源自：5-5 CSS3背景 制作导航菜单综合练习题

弄晕了 为什么不设置.nav a的样式 .nav a:hover也就不起作用了呢

        .nav a{
          display: inline-block;
          -webkit-transition: all 0.2s ease-in;
          -moz-transition: all 0.2s ease-in;
          -o-transition: all 0.2s ease-in;
          -ms-transition: all 0.2s ease-in;
          transition: all 0.2s ease-in;
        }

        .nav a:hover{
          -webkit-transform:rotate(10deg);
          -moz-transform:rotate(10deg);
          -o-transform:rotate(10deg);
          -ms-transform:rotate(10deg);
          transform:rotate(10deg);
        }


我后来自己试了一下 如果没有之前.nav a的样式  其hover的样式也就不出现了  为什么呢

求大神指导

提问者：葫芦胡 2018-02-02 22:35

个回答

  • 慕侠4705823
    2018-02-03 11:51:43
    已采纳

    .nav a:hover{

          display: inline-block;

      -webkit-transform:rotate(10deg);

      -moz-transform:rotate(10deg);

      -o-transform:rotate(10deg);

      -ms-transform:rotate(10deg);

      transform:rotate(10deg);

    }

    我试了一下，这样也是可以实现动画效果的，就是说transition只是对于动画的过程进行设置，如果不设置就按默认的动画效果来，主要还是出在display：inline-block上，查了一下transform是支持块级元素和某些行内元素，所以对于<a>这种行内元素，不加这个语句，是不起作用的，以上是我个人理解

    0
  • 慕侠4705823
    2018-02-03 10:49:28

    .nav a:hover{

          display: inline-block;

      -webkit-transition: all 0.2s ease-in;

      -moz-transition: all 0.2s ease-in;

      -o-transition: all 0.2s ease-in;

      -ms-transition: all 0.2s ease-in;

      transition: all 0.2s ease-in;

      -webkit-transform:rotate(10deg);

      -moz-transform:rotate(10deg);

      -o-transform:rotate(10deg);

      -ms-transform:rotate(10deg);

      transform:rotate(10deg);

    }

    改成这样，把.nav a{}去掉也是可以的

    0