CSS 设置链接的光标显示

实例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>链接光标显示效果示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }
        
        h1 {
            color: #333;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }
        
        .cursor-examples {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-top: 30px;
        }
        
        .cursor-box {
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            transition: background-color 0.3s;
        }
        
        .cursor-box:hover {
            background-color: #f5f5f5;
        }
        
        /* 各种光标样式示例 */
        a.default-cursor {
            cursor: default;  /* 默认箭头 */
        }
        
        a.pointer-cursor {
            cursor: pointer;  /* 手形指针 */
        }
        
        a.text-cursor {
            cursor: text;  /* 文本输入I形 */
        }
        
        a.move-cursor {
            cursor: move;  /* 移动十字箭头 */
        }
        
        a.wait-cursor {
            cursor: wait;  /* 等待(沙漏/转圈) */
        }
        
        a.help-cursor {
            cursor: help;  /* 帮助问号 */
        }
        
        a.not-allowed-cursor {
            cursor: not-allowed;  /* 禁止操作 */
        }
        
        a.zoom-in-cursor {
            cursor: zoom-in;  /* 放大镜(+) */
        }
        
        a.zoom-out-cursor {
            cursor: zoom-out;  /* 缩小镜(-) */
        }
        
        a.grab-cursor {
            cursor: grab;  /* 抓取手形 */
        }
        
        a.grabbing-cursor {
            cursor: grabbing;  /* 抓取中手形 */
        }
        
        a.crosshair-cursor {
            cursor: crosshair;  /* 十字准星 */
        }
        
        /* 自定义图片光标 */
        a.custom-cursor {
            cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%23ff5722" d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z"/></svg>'), auto;
        }
    </style>
</head>
<body>
    <h1>链接光标显示效果示例</h1>
    
    <p>鼠标悬停在以下链接上查看不同的光标效果：</p>
    
    <div class="cursor-examples">
        <div class="cursor-box">
            <h3>default (默认)</h3>
            <p>标准箭头光标：<a href="#" class="default-cursor">悬停查看</a></p>
        </div>
        
        <div class="cursor-box">
            <h3>pointer (指针)</h3>
            <p>传统链接手形光标：<a href="#" class="pointer-cursor">悬停查看</a></p>
        </div>
        
        <div class="cursor-box">
            <h3>text (文本)</h3>
            <p>文本输入I形光标：<a href="#" class="text-cursor">悬停查看</a></p>
        </div>
        
        <div class="cursor-box">
            <h3>move (移动)</h3>
            <p>移动十字箭头光标：<a href="#" class="move-cursor">悬停查看</a></p>
        </div>
        
        <div class="cursor-box">
            <h3>wait (等待)</h3>
            <p>等待状态光标：<a href="#" class="wait-cursor">悬停查看</a></p>
        </div>
        
        <div class="cursor-box">
            <h3>help (帮助)</h3>
            <p>帮助问号光标：<a href="#" class="help-cursor">悬停查看</a></p>
        </div>
        
        <div class="cursor-box">
            <h3>not-allowed (禁止)</h3>
            <p>禁止操作光标：<a href="#" class="not-allowed-cursor">悬停查看</a></p>
        </div>
        
        <div class="cursor-box">
            <h3>zoom-in (放大)</h3>
            <p>放大镜光标：<a href="#" class="zoom-in-cursor">悬停查看</a></p>
        </div>
        
        <div class="cursor-box">
            <h3>zoom-out (缩小)</h3>
            <p>缩小镜光标：<a href="#" class="zoom-out-cursor">悬停查看</a></p>
        </div>
        
        <div class="cursor-box">
            <h3>grab (抓取)</h3>
            <p>抓取手形光标：<a href="#" class="grab-cursor">悬停查看</a></p>
        </div>
        
        <div class="cursor-box">
            <h3>grabbing (抓取中)</h3>
            <p>抓取中手形光标：<a href="#" class="grabbing-cursor">悬停查看</a></p>
        </div>
        
        <div class="cursor-box">
            <h3>crosshair (十字准星)</h3>
            <p>十字准星光标：<a href="#" class="crosshair-cursor">悬停查看</a></p>
        </div>
        
        <div class="cursor-box">
            <h3>自定义光标</h3>
            <p>SVG图片光标：<a href="#" class="custom-cursor">悬停查看</a></p>
        </div>
    </div>
</body>
</html>