HTML光标样式
程序员文章站
2022-05-06 19:21:09
...
HTML光标样式
cursor:auto; | 自动 |
cursor:all-scroll; | 上下左右任何方向滚动 |
cursor:crosshair; | 十字准心 |
cursor:pointer; | 手 |
cursor:wait; | 等待 |
cursor:help; | 帮助 |
cursor:no-drop; | 无法释放 |
cursor:text; | 文字/编辑 |
cursor:move; | 可移动对象 |
cursor:vertical-text; | 可编辑的垂直文本的光标 |
cursor:n-resize; | 向上改变大小(North) |
cursor:s-resize; | 向下改变大小(South) |
cursor:e-resize; | 向右改变大小(East) |
cursor:w-resize; | 向左改变大小(West) |
cursor:ne-resize; | 向上右改变大小(North East) |
cursor:nw-resize; | 向上左改变大小(North West) |
cursor:se-resize; | 向下右改变大小(South East) |
cursor:sw-resize; | 向下左改变大小(South West) |
cursor:col-resize; | 可被水平改变尺寸 |
cursor:row-resize; | 可被垂直改变尺寸 |
cursor:not-allowed; | 禁止 |
cursor:progress; | 处理中 |
cursor:default; | 系统默认 |
cursor:url('#');#为光标文件地址 (注意文件格式必须为:.cur或.ani) |
用户自定义(可用动画) 注意:在定义完自定义的游标之后在末尾加上一般性的游标, 以防那些url所定义的游标不能使用 |
说明:
cursor 属性:设置显示的光标的类型(形状)。
此属性的值可以是多个,其间要用逗号分隔;
假如第一个值无法找到而不能被显示,则第二个值将被尝试使用,依此类推;
假如全部值都不可用的话,则此属性不会发生作用,光标也不会被改变。
比如:{cursor:pointer,wait,help;},从pointer到wait,再到help,如果都没被应用,则cursor属性不起任何作用。
现在举一个“手”光标的例子,写法有两种:
效果图:
cursor:pointer; | 手 |
第一种是行内样式:(行内样式:将CSS样式编写在标签之中)
table border="1">
tr class="pointer" style="cursor:pointer;">
td>cursor:pointer;td>
td>手td>
tr>
table>
第二种是内部样式:(内部样式:由
style type="text/css">
.pointer:hover{
cursor:pointer;
}
style>
body>
table border="1">
tr class="pointer">
td>cursor:pointer;td>
td>手td>
tr>
table>
body>
上一篇: CSS3动画基本的转换和过渡_html/css_WEB-ITnose
下一篇: php配置相关
推荐阅读
-
用java 将Excel转为图片、html、XPS、XML、CSV
-
CSS实现悬浮出现双括号_html/css_WEB-ITnose
-
HTML页面指定符号,使该符号内的内容当做PHP代码。
-
使用css3实现文章新闻列表排行榜(数字)_html/css_WEB-ITnose
-
9种CSS3 blend模式制作的鼠标滑过图片标题特效_html/css_WEB-ITnose
-
CSS3实现的鼠标悬浮开门关门效果代码实例_html/css_WEB-ITnose
-
mssql sqlserver 使用sql脚本输出交替不同的背景色的html信息的方法分享
-
【新浪SAE】去掉烦人的实名认证提示(讨论)_html/css_WEB-ITnose
-
PHP实现HTML页面静态化的方法
-
CSS3和SVG炫酷鼠标点击按钮效果_html/css_WEB-ITnose