首页 > Web开发 > 详细

周五的html学习

时间:2019-11-30 01:44:37      阅读:87      评论:0      收藏:0      [点我收藏+]

触发动画的事件选择鼠标事件,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修改
明天考虑下加上渐变透明等

周五的html学习

原文:https://www.cnblogs.com/Stratford-International/p/11961013.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!