本文摘自PHP中文网,作者藏色散人,侵删。
在css中可以通过cursor属性来设置鼠标样式,其实现方法如:首先创建一个HTML示例文件;然后定义一些span标签,并给span标签分别添加style属性;最后通过设置不同的cursor属性值来实现不同的鼠标样式即可。
本文操作环境:宏基S40-51、Windows10 家庭中文版、HTML5&&CSS3&&HBuilderX.3.0.5
推荐:《css视频教程》
css写鼠标样式
我们在DIV CSS布局时候,我们会遇到对对象内鼠标指针光标进行控制,比如鼠标经过指针变为手指形状等样式,接下来我们介绍鼠标指针样式cursor控制。系统默认鼠标指针样式外,可以通过CSS设置图片为鼠标指针,常见有些网站鼠标指针是各种各样小图片样式,当然这个是通过css cursor设置鼠标样式。
1、cursor语法:
1 2 3 4 | cursor : auto | crosshair | default | hand | move | help
| wait | text | w-resize |s-resize | n-resize |e-resize
| ne-resize |sw-resize | se-resize | nw-resize |pointer
| url (url)
|
常用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、布局结构
1 2 3 | p { cursor: text; }
a { cursor: pointer; }
body { cursor: url( "小图片地址" )}
|
一些不同的光标的代码示例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "UTF-8" >
<title>css鼠标样式</title>
</head>
<body>
<p>请把鼠标移动到单词上,可以看到鼠标指针发生变化:</p>
<span style= "cursor:auto" >auto:默认,浏览器设置的光标。</span><br>
<span style= "cursor:crosshair" >crosshair:光标呈现为十字线。</span><br>
<span style= "cursor:default" > default :默认光标(通常是一个箭头)</span><br>
<span style= "cursor:e-resize" >e-resize:此光标指示矩形框的边缘可被向右(东)移动。</span><br>
<span style= "cursor:help" >help:此光标指示可用的帮助(通常是一个问号或一个气球)。</span><br>
<span style= "cursor:move" >move:此光标指示某对象可被移动。</span><br>
<span style= "cursor:n-resize" >n-resize:此光标指示矩形框的边缘可被向上(北)移动。</span><br>
<span style= "cursor:ne-resize" >ne-resize:此光标指示矩形框的边缘可被向上及向右移动(北/东)。</span><br>
<span style= "cursor:nw-resize" >nw-resize:此光标指示矩形框的边缘可被向上及向左移动(北/西)。</span><br>
<span style= "cursor:pointer" >pointer:光标呈现为指示链接的指针(一只手)</span><br>
<span style= "cursor:progress" >progress</span><br>
<span style= "cursor:s-resize" >s-resize:此光标指示矩形框的边缘可被向下移动(南)。</span><br>
<span style= "cursor:se-resize" >se-resize:此光标指示矩形框的边缘可被向下及向右移动(南/东)。</span><br>
<span style= "cursor:sw-resize" >sw-resize:此光标指示矩形框的边缘可被向下及向左移动(南/西)。</span><br>
<span style= "cursor:text" >text:此光标指示文本。</span><br>
<span style= "cursor:w-resize" >w-resize:此光标指示矩形框的边缘可被向左移动(西)。</span><br>
<span style= "cursor:wait" >wait:此光标指示程序正忙(通常是一只表或沙漏)。</span><br>
</body>
</html>
|
更多计算机编程相关知识,请访问:编程教学!!
以上就是css鼠标样式的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
为什么把css放到顶部
css为什么会出现清除浮动的问题
css hack是什么意思
css tab-size属性怎么用
如何用css写轮播图效果?
css3实现条状百分比效果
css flex-wrap属性怎么用
怎么在head区域引入css
css perspective-origin属性怎么用
css如何让高度自适应
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css鼠标样式