HTML光标样式

最新推荐文章于 2024-12-07 17:19:15 发布

转载最新推荐文章于 2024-12-07 17:19:15 发布 · 224 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mossbaoo/p/5743737.html

HTML光标样式

**把你的光标放到相应文字上鼠标显示效果**
cursor:auto;	自动
cursor:zoom-in;	放大镜
cursor:zoom-out;	缩小镜
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>标签定位在<head>之中）

<!-- 这里是style里面的内容 -->
<style type="text/css">
.pointer:hover{
        cursor:pointer;
    }
</style>

<!-- 这里是body里面的内容 -->
<body>
    <table border="1">
        <tr class="pointer">
            <td>cursor:pointer;</td>
            <td>手</td>
        </tr>
    </table>
</body>

转载于:https://www.cnblogs.com/mossbaoo/p/5743737.html