css cursor鼠标效果
css cursor鼠标效果
css cursor鼠标效果一、CSS中cursor的用处
1、设置或检索在对象上移动的鼠标指针采用的光标形状。
2、此属性的值可以是多个,其间用逗号分隔。假如第一个值不可以被客户端系统理解或所指定的光标无法找到及显示,则第二个值将被尝试使用。依此类推。假如全部值都不可用的话,则此属性不会发生作用。光标不会被改变。
3、这个属性主要是修改鼠标移上页面某一元素,所表现出来的形状。用来引导用户,见到鼠标的形状马上知道这一元素是什么类型的元素,如:小手,很清楚知道那是一个超级连接,等。
4、当然根据需要你也可以将样式应用于其它标签,或者单纯的只应用于某一段文本。如果读者对CSS代码不陌生的话,或许直接手写代码更方便。特别是,如果你想在不同的位置运用不同的鼠标样式,或者不同的标签使用不同的鼠标样式。直接将样式写在某个具体的标签里边就可以了。
二、cursor的值
hand:是手型。
crosshair:是十字型,就是小乌龟首页所用的样式。
text:是平时鼠标移动到文本上的样式。
wait:是等待的效果。
default:是默认的那种效果。
help:是带问号的鼠标样式。
e-resize:是向右的箭头。
ne-resize:是向右上方的箭头。
n-resize:是向上的箭头。
nw-resize:是向左上方的箭头。
w-resize:是向左的箭关。
sw-resize:是向左下的箭头。
s-resize:是向下的箭头。
se-resize:是向右下方的箭头。
auto:是系统自动的效果。
三、cursor实例
<span style=cursor:hand> hand:是大家所熟悉的手型。< /span>
< span style=cursor:crosshair>crosshair:是十字型,就是小乌龟首页所用的样式。< /span>
< span style=cursor:text>text:是平时鼠标移动到文本上的样式。< /span>
< span style=cursor:wait>wait:是等待的效果。< /span>
< span style=cursor:default>default:是默认的那种效果。< /span>
< span style=cursor:help>help:是带问号的鼠标样式。< /span>
< span style=cursor:e-resize>e-resize:是向右的箭头。< /span>
< span style=cursor:ne-resize>ne-resize:是向右上方的箭头。< /span>
< span style=cursor:n-resize>n-resize:是向上的箭头。< /span>
< span style=cursor:nw-resize>nw-resize:是向左上方的箭头。< /span>
< span style=cursor:w-resize>w-resize:是向左的箭关。< /span>
< span style=cursor:sw-resize>sw-resize:是向左下的箭头。< /span>
< span style=cursor:s-resize>s-resize:是向下的箭头。< /span>
< span style=cursor:se-resize>se-resize:是向右下方的箭头。< /span>
< span style=cursor:auto>auto:是系统自动的效果。< /span>
四、注意事项:
在ie下设置 css 样式 style="cursor:hand;" 可以正常显示,但是在firefox下就不行,改用 style="cursor:pointer;",则在两个浏览器下都能正常显示
热门推荐
- sql数据库查询优化(数据库SQL语句优化总结收藏)
- python 迭代对象必须实现哪些方法(详解python之heapq模块及排序操作)
- 怎么用docker部署springboot项目(Spring Boot使用Docker分层打包的设置方法)
- dedecms怎么改使用页面(dedecms从子目录移动到根目录的方法)
- sql server批量导出数据(SQL Server 批量插入数据的完美解决方案)
- docker端口配置(docker 无法释放端口的解决方案)
- docker node 分阶段构建(Docker安装、创建镜像、加载并运行NodeJS程序的详细过程)
- 给页面加上运行代码功能
- docker查看管理配置信息(Docker Secret的管理和使用详解)
- wordpress如何在文章中自定义html(wordpress添加Html5的表单验证required方法小结)