弄暈了 為什么不設置.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-03
.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>這種行內元素，不加這個語句，是不起作用的，以上是我個人理解
2018-02-03
.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{}去掉也是可以的