css3控制光标的属性

最新推荐文章于 2023-07-13 16:48:24 发布

先给自己打个气

最新推荐文章于 2023-07-13 16:48:24 发布

阅读量805

点赞数

分类专栏： JavaScript 文章标签： html5 html css3 css

本文链接：https://blog.csdn.net/qq_40641206/article/details/104093036

版权

JavaScript 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

通过 CSS 的 cursor 属性可以改变光标在目标元素上的形状。

该属性支待如下属性值。
► all-scroll: 代表十字箭头光标。
► col-resize: 代表水平拖动线光标
► crosshair: 代表十字线光标。
► move: 代表移动十字箭头光标。
► help：代表带问号的箭头光标。
► no-drop: 代表禁止光标。
► not-allowed: 代表禁止光标。
► pointer: 代表手形光标。
► prog「ess: 代表带进度环的箭头光标。
► row-resize: 代表垂直拖动线光标。
► text: 代表文本编辑光标。通常就是一个大写的 I 字光标。
► vertical-text: 代表垂直文本编辑光标。通常就是大写的 I 字光标旋转 90° 。 ► wait: 代表进度环光标。
► *-resize: 代表可在各种方向上拖动的光标。支持 w-resize、 s-resize、 n-resize、 e-resize、 ne-resize、 sw-resize、 se-resize、 ow-resize 等各种属性值，其中 n 代表向上方向， s 代表向下方向， e 代表向右方向， w 代表向左方向。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div{
        display: inline-block;
        border: 1px solid red;
        width: 160px;
        height: 70px;
    } 
    </style>
</head>
<body> 
    <div style="cursor:all-scroll ;">十字箭头光标</div> 
    <div style="cursor:col-resize ;">水平拖动线光标</div> 
    <div style="cursor:crosshair;">十字线光标</div> 
    <div style="cursor:move;">代表移动十字箭头光标</div>
    <div style="cursor:help ;">带问号的箭头光标</div> 
    <div style="cursor:no-drop;">禁止光标</div>
    <div style="cursor:not-allowed;">禁止光标</div> 
    <div style="cursor : pointer;">手形光标</div> 
    <div style="cursor:progress;">带进度环的箭头光标</div>
    <div style="cursor : row-resize;">心垂直拖动线光标</div>
    <div style=" cursor : text;">文本编辑光标</div> 
    <div style=" cursor:vertical-text;">垂直文本编辑光标</div>
    <div style="cursor : wait;">进度环光标</div>
    <div style="cursor : n-resize ;">可向上拖动的光标</div> 
    <div style=" cursor : ne-resize;">上、右可拖动的光标</div>
    <div style="cursor : se-resize ;">下、右可拖动的光标</div> 
</body>
</html>

运行结果：
在这里插入图片描述