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

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

来源：5-5 CSS3背景制作导航菜单综合练习题

葫芦胡

2018-02-02 22:35

        .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的样式也就不出现了为什么呢

求大神指导

写回答关注

2回答

慕侠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>这种行内元素，不加这个语句，是不起作用的，以上是我个人理解

1 0

葫芦胡

噢好的我差不多明白了谢谢啦

2018-02-03 12:29:05

共 1 条回复 >
慕侠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{}去掉也是可以的

1 0

葫芦胡

也就是说作为动画变化是必须要设置过度transition属性对吗如果只是静态的就不要设置transition？

2018-02-03 11:36:54

共 1 条回复 >