css写鼠标样式
我们在DIV CSS布局时候,我们会遇到对对象内鼠标指针光标进行控制,比如鼠标经过指针变为手指形状等样式,接下来我们介绍鼠标指针样式cursor控制。系统默认鼠标指针样式外,可以通过CSS设置图片为鼠标指针,常见有些网站鼠标指针是各种各样小图片样式,当然这个是通过css cursor设置鼠标样式。
1、cursor语法:
常用cursor光标说明
1、div{ cursor:default }默认正常鼠标指针
2、div{ cursor:hand }和div{ cursor:text } 文本选择效果
3、div{ cursor:move } 移动选择效果
4、div{ cursor:pointer } 手指形状 链接选择效果
5、div{ cursor:url(url图片地址) }设置对象为图片
2、cursor样式效果图
3、鼠标指针说明
cursor设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
4、布局结构
在css中,可以使用“:hover”选择器设置鼠标滑过按钮时的颜色。下面小编举例讲解css如何设置鼠标滑过按钮变颜色。
新建一个html文件,命名为test.html,用于讲解css如何设置鼠标滑过按钮变颜色。
在test.html文件内,使用buttom标签创建一个按钮。
在test.html文件内,设置button标签的class属性为mytest。
在css标签内,通过class和":hover"选择设置鼠标经过按钮时的颜色。
在css标签内,将背景颜色设置为红色,文字颜色为白色,无边框。
在浏览器打开test.html文件,查看实现的效果。
END
总结:
1
1、使用buttom标签创建一个按钮,设置button标签的class属性为mytest。
2、在css标签内,通过class和":hover"选择设置鼠标经过按钮时的颜色。
3、在css标签内,将背景颜色设置为红色,文字颜色为白色,无边框。
4、在浏览器打开test.html文件,查看实现的效果。