周五的html学习

触发动画的事件选择鼠标事件,CSS中的鼠标事件有几种:
1.div:link{}正常状态
2.div:hover{}鼠标滑过,常用
3.div:visited{}访问过后
4.div:active{}按下
5.div:focus{}鼠标保持点击后移开

在style中对需要过渡动画的元素新建 :hover的新样式,加入想要改变的内容即可

.menu li.menu-item a{
        text-decoration: none;
        color:green;
    }
.menu li.menu-item a:hover
    {
        color :aqua;
    }
    

效果如下

同理,设置导航栏的背景色块,然后通过hover改变样式就可以实现导航栏随鼠标滑过变化的效果了。

不过需要主义的是,color属性控制的是内部字体的颜色,li块的颜色需要通过background-color修改
明天考虑下加上渐变透明等

猜你喜欢

转载自www.cnblogs.com/Stratford-International/p/11961013.html