css实现鼠标经过样式改变的方法
这篇文章主要介绍了css实现鼠标经过样式改变的方法,具有一定借鉴价值,需要的朋友可以参考下。下面就和我一起来看看吧。
成都创新互联公司是专业的彭山网站建设公司,彭山接单;提供网站制作、成都网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行彭山网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
什么是css
css是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设计网页的样式,使网页更加美化。它也是一种定义样式结构如字体、颜色、位置等的语言,并且css样式可以直接存储于HTML网页或者单独的样式单文件中,而样式规则的优先级由css根据这个层次结构决定,从而实现级联效果,发展至今,css不仅能装饰网页,也可以配合各种脚本对于网页进行格式化。
css实现鼠标经过样式改变的方法总结:1、使用“:hover”伪类选择器,选择鼠标指针浮动在其上的元素,并为其设置其样式,语法“:hover{属性名:属性值}”;2、使用transtion属性,语法“transtion:css属性名称 过度时间;”。
1、使用伪类实现样式切换
伪类是CSS2.1时出现的新特性,让许多原本需要JavaScript才能做出来的效果使用CSS就能实现。
比如实现下面的鼠标悬停效果,只要为:hover伪类应用一组新样式即可。当访客鼠标移动到按钮上面时,浏览器会自动为按钮应用这新样式。
效果:
2、使用CSS3的过渡功能实现颜色过渡
直接使用伪类虽然实现了样式的改变,但由于没有过渡效果会显得很生硬。以前如果要实现过渡,就需要借助第三方的js框架来实现。现在只需要使用CSS3的过渡(transition)功能,就可以从一组样式平滑的切换到另一组样式。
下面鼠标移入后,按钮背景色会慢慢地变成黄色。鼠标离开,过渡效果又会发生,颜色恢复到初始状态。
效果:
以上就是css实现鼠标经过样式改变的方法的详细内容了,看完之后是否有所收获呢?如果想了解更多相关内容,欢迎来创新互联行业资讯!
分享文章:css实现鼠标经过样式改变的方法
分享链接:http://scyanting.com/article/gjppeg.html