淘宝网站建设可信吗,html5自建网站,天津建设银行官方网站,网站提交地址前面的话 在浏览器中#xff0c;光标对于提供交互反馈很有用。通过在不同的场景中改变光标#xff0c;就能赋予其不同的含义 定义 cursor光标 值: [uri,]*[auto | default | pointer | crosshair | move | e-resize | ne-resize | nw-resize | n-resize | se-resize …前面的话 在浏览器中光标对于提供交互反馈很有用。通过在不同的场景中改变光标就能赋予其不同的含义 定义 cursor光标 值: [uri,]*[auto | default | pointer | crosshair | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress]] | inherit 初始值: auto 应用于: 所有元素 继承性: 有 标准样式 CSS2提供了相对较少的选择 url: 自定义光标的URL
default: 默认光标通常是一个箭头
auto: 浏览器自动识别的光标
crosshair : 十字线
pointer: 手型指针
move: 移动指针
e-resize: 向东移动指针
ne-resize: 向东北移动指针
nw-resize: 向西北移动指针
n-resize: 向北移动指针
se-resize: 向东南移动指针
sw-resize: 向西南移动指针
s-resize: 向南移动指针
w-resize: 向西移动指针
text: 文本指针
wait: 指示程序正忙
help: 帮助指针 stylewidth: 100%; height: 320px; srchttps://demo.xiaohuochai.site/css/cursor/c1.html frameborder0 width320 height240 拓展样式 CSS3增加了更多的cursor的样式值 [注意]所有拓展样式IE7-浏览器都不支持 cursor:none (not IE8, Safari)
cursor:context-menu (not Safari,Firefox,Chrome)
cursor:cell (not Safari)
cursor:alias (not Safari)
cursor:copy (not IE,Safari)
cursor:grab (not IE,Safari,Chrome)
cursor:grabbing (not IE,Safari,Chrome)
cursor:zoom-in (not IE,Safari)
cursor:zoom-out (not IE,Safari)
cursor:vertical-text
cursor:no-drop
cursor:not-allowed
cursor:all-scroll
cursor:ew-resize
cursor:ns-resize
cursor:nesw-resize
cursor:nwse-resize
cursor:col-resize
cursor:row-resize stylewidth: 100%; height: 400px; srchttps://demo.xiaohuochai.site/css/cursor/c2.html frameborder0 width320 height240
私有样式 有些浏览器还提供了增加浏览器前缀的私有样式 [注意]safari将-webkit-grab和-webkit-grabbing都解释为default cursor:-webkit-grab; cursor: -moz-grab;
cursor:-webkit-grabbing; cursor: -moz-grabbing;
cursor:-webkit-zoom-in; cursor: -moz-zoom-in;
cursor:-webkit-zoom-out; cursor: -moz-zoom-out; stylewidth: 100%; height: 300px; srchttps://demo.xiaohuochai.site/css/cursor/c3.html frameborder0 width320 height240
自定义样式 所有浏览器都支持使用后缀名为.cur的文件chrome、firefox、safari还支持使用普通图片制作光标 [注意]使用URL自定义样式后面必须跟有一个逗号和某个通用关键字 //错误
cursor: url(m.cur);
//正确
cursor: url(m.cur),auto; stylewidth: 100%; height: 280px; srchttps://demo.xiaohuochai.site/css/cursor/c44.html frameborder0 width320 height240
常见应用 链接的默认光标是手型指针pointer通过光标的变化可以让访问者清楚的知道该元素是可点击的 元素的title属性用来提供元素的额外信息配合help光标可以得到更好的表现方式 span[title]{
cursor: help;
border-bottom: 1px solid gray;
} divspan titleCascading Style SheetsCSS/span is much too interesting/div stylewidth: 100%; height: 40px; srchttps://demo.xiaohuochai.site/css/cursor/c5.html frameborder0 width320 height240
更多专业前端知识请上
【猿2048】www.mk2048.com
