l-1

WEB教程

主页/CSS教程/CSS功能模块/CSS光标样式cursor

CSS教程

CSS光标样式cursor

CSS光标样式cursor详解：自定义鼠标指针

1. 光标样式cursor基础

CSS的cursor属性用于设置或检索在对象上移动的鼠标指针采用的光标形状。此属性对于提升用户体验具有重要意义，通过光标样式的变化，可以直观地向用户传达元素的功能和状态。当用户将鼠标悬停在网页元素上时，光标形状的改变能提供有效的视觉反馈，帮助用户理解元素的可交互性。

cursor属性可以接受多个值，其间用逗号分隔。浏览器会从第一个值开始尝试，如果无法理解或显示指定的光标，则会尝试后续的值。如果全部值都不可用，则此属性不会发生作用，光标保持原状。

2. cursor属性语法与值

cursor属性的基本语法如下：

cursor: [<url> [<x> <y>]?,]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | grab | grabbing | zoom-in | zoom-out ]

cursor属性的取值主要分为三类：通用光标、自定义光标和坐标指定光标。下面通过表格详细说明各类常见属性值及其用途：

属性值描述适用场景
default客户端平台的默认光标，通常是一个箭头默认状态
auto浏览器根据当前情况自动确定鼠标光标类型让浏览器决定
pointer竖起一只手指的手形光标，表示链接可点击元素、链接
text表示可编辑文本，通常是大写字母I的形状文本选择、输入框
move十字箭头光标，表示对象可被移动可拖动元素
wait程序忙需要等待的光标，通常是沙漏或手表加载状态
help带有问号标记的箭头，表示有帮助信息存在帮助信息
not-allowed禁止标记(一个被斜线贯穿的圆圈)光标不可操作状态
crosshair简单的十字线光标精确定位
progress带有沙漏标记的箭头光标，表示进程正在后台运行后台处理
grab手形光标，表示可抓取可拖动元素
zoom-in带”+”号的放大镜，表示放大放大功能
zoom-out带”-“号的放大镜，表示缩小缩小功能

3. 使用系统内置光标

以下是一个完整示例，展示如何使用不同的系统内置光标样式：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>系统内置光标样式示例 - 找找网</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        .cursor-demo {
            display: inline-block;
            padding: 10px;
            margin: 5px;
            border: 1px solid #ccc;
            border-radius: 4px;
            background-color: #f9f9f9;
        }
        .default { cursor: default; }
        .pointer { cursor: pointer; }
        .text { cursor: text; }
        .move { cursor: move; }
        .wait { cursor: wait; }
        .help { cursor: help; }
        .not-allowed { cursor: not-allowed; }
        .crosshair { cursor: crosshair; }
        .progress { cursor: progress; }
        .grab { cursor: grab; }
        .zoom-in { cursor: zoom-in; }
        .zoom-out { cursor: zoom-out; }
    </style>
</head>
<body>
    <h2>系统内置光标样式示例</h2>
    <p>将鼠标悬停在以下元素上查看不同的光标效果：</p>

    <div class="cursor-demo default">default - 默认光标</div>
    <div class="cursor-demo pointer">pointer - 链接指针</div>
    <div class="cursor-demo text">text - 文本选择</div>
    <div class="cursor-demo move">move - 可移动</div>
    <div class="cursor-demo wait">wait - 等待</div>
    <div class="cursor-demo help">help - 帮助</div>
    <div class="cursor-demo not-allowed">not-allowed - 不允许</div>
    <div class="cursor-demo crosshair">crosshair - 十字线</div>
    <div class="cursor-demo progress">progress - 进行中</div>
    <div class="cursor-demo grab">grab - 可抓取</div>
    <div class="cursor-demo zoom-in">zoom-in - 放大</div>
    <div class="cursor-demo zoom-out">zoom-out - 缩小</div>
</body>
</html>

4. 创建自定义光标

CSS允许用户创建自己的鼠标光标图片，并指定这些图片作为光标样式。创建自定义光标的基本语法如下：

cursor: url('光标图像路径'), 备用光标;

使用自定义图像作为光标类型时，需要注意浏览器兼容性。IE和Opera只支持.cur等特定的图片格式；Firefox、Chrome、Safari既支持特定图片类型也支持常见的.jpg、.gif、.jpg等图片格式。

以下是使用自定义光标的完整示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>自定义光标示例 - 找找网</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            text-align: center;
        }
        .custom-cursor-area {
            padding: 50px;
            margin: 20px auto;
            border: 2px dashed #ccc;
            background-color: #f0f0f0;
            max-width: 600px;
        }
        .custom-cursor {
            cursor: url('custom-cursor.cur'), pointer;
        }
        .custom-cursor-fallback {
            cursor: url('custom-cursor.png'), url('custom-cursor.cur'), auto;
        }
        .explanation {
            margin-top: 30px;
            padding: 15px;
            background-color: #e7f3ff;
            border-radius: 5px;
            text-align: left;
        }
    </style>
</head>
<body>
    <h2>自定义光标示例</h2>

    <div class="custom-cursor-area custom-cursor">
        <h3>区域1: 使用.cur格式自定义光标</h3>
        <p>将鼠标移入此区域，光标将变为自定义样式（.cur格式）</p>
    </div>

    <div class="custom-cursor-area custom-cursor-fallback">
        <h3>区域2: 使用多备选方案自定义光标</h3>
        <p>将鼠标移入此区域，浏览器将尝试加载PNG格式光标，失败则尝试CUR格式</p>
    </div>

    <div class="explanation">
        <h4>自定义光标使用说明：</h4>
        <ul>
            <li>自定义光标图像尺寸建议不超过32×32像素</li>
            <li>提供多个备选光标地址以确保浏览器兼容性</li>
            <li>最后总是添加一个通用光标作为最终回退方案</li>
            <li>常见光标格式：.cur(静态)、.ani(动态)、.png、.gif等</li>
        </ul>
    </div>
</body>
</html>

5. 高级光标应用技巧

5.1 隐藏并模拟自定义光标

可以通过隐藏默认光标并使用JavaScript结合CSS创建更复杂的自定义光标效果。以下是一个高级示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>高级光标模拟示例 - 找找网</title>
    <style>
        body {
            cursor: none;
            margin: 0;
            padding: 0;
            height: 100vh;
            overflow: hidden;
            font-family: Arial, sans-serif;
        }
        #zzw_cursor_dot {
            position: absolute;
            top: 0;
            left: 0;
            width: 12px;
            height: 12px;
            background: #999;
            border-radius: 50%;
            pointer-events: none;
            z-index: 9999;
            mix-blend-mode: exclusion;
        }
        #zzw_cursor_ring {
            position: absolute;
            top: 0;
            left: 0;
            width: 42px;
            height: 42px;
            border: 2px solid #999;
            border-radius: 50%;
            pointer-events: none;
            z-index: 9998;
            transition: all 0.1s ease-out;
            mix-blend-mode: exclusion;
        }
        .content {
            padding: 50px;
            text-align: center;
        }
        .hover-element {
            display: inline-block;
            padding: 20px;
            margin: 30px;
            background: #4CAF50;
            color: white;
            border-radius: 5px;
            transition: all 0.3s ease;
        }
    </style>
</head>
<body>
    <div class="content">
        <h2>高级光标模拟示例</h2>
        <p>此示例隐藏了默认光标，使用JavaScript和CSS模拟了自定义光标效果</p>
        <div class="hover-element">悬停在我上面查看效果</div>
    </div>

    <div id="zzw_cursor_dot"></div>
    <div id="zzw_cursor_ring"></div>

    <script>
        const zzw_cursor_dot = document.getElementById('zzw_cursor_dot');
        const zzw_cursor_ring = document.getElementById('zzw_cursor_ring');
        const zzw_hover_elements = document.querySelectorAll('.hover-element');

        let zzw_mouseX = 0;
        let zzw_mouseY = 0;
        let zzw_ringX = 0;
        let zzw_ringY = 0;

        // 更新光标位置
        function zzw_updateCursorPosition(e) {
            zzw_mouseX = e.clientX;
            zzw_mouseY = e.clientY;
        }

        // 动画循环
        function zzw_animateCursor() {
            // 更新圆点位置（立即响应）
            zzw_cursor_dot.style.transform = `translate(${zzw_mouseX - 6}px, ${zzw_mouseY - 6}px)`;

            // 更新圆环位置（带延迟动画）
            zzw_ringX += (zzw_mouseX - zzw_ringX - 21) * 0.2;
            zzw_ringY += (zzw_mouseY - zzw_ringY - 21) * 0.2;
            zzw_cursor_ring.style.transform = `translate(${zzw_ringX}px, ${zzw_ringY}px)`;

            requestAnimationFrame(zzw_animateCursor);
        }

        // 初始化事件监听
        document.addEventListener('mousemove', zzw_updateCursorPosition);

        // 为悬停元素添加效果
        zzw_hover_elements.forEach(element => {
            element.addEventListener('mouseenter', function() {
                zzw_cursor_ring.style.width = '60px';
                zzw_cursor_ring.style.height = '60px';
                zzw_cursor_ring.style.borderColor = '#FF5722';
                zzw_cursor_ring.style.borderWidth = '3px';
            });

            element.addEventListener('mouseleave', function() {
                zzw_cursor_ring.style.width = '42px';
                zzw_cursor_ring.style.height = '42px';
                zzw_cursor_ring.style.borderColor = '#999';
                zzw_cursor_ring.style.borderWidth = '2px';
            });
        });

        // 开始动画
        zzw_animateCursor();
    </script>
</body>
</html>

5.2 响应不同元素状态的光标

结合CSS伪类选择器，可以为不同状态的元素设置不同的光标样式：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>状态响应光标示例 - 找找网</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            max-width: 800px;
            margin: 0 auto;
        }
        .form-group {
            margin-bottom: 20px;
        }
        input[type="text"]:enabled {
            cursor: text;
            background-color: white;
        }
        input[type="text"]:disabled {
            cursor: not-allowed;
            background-color: #f0f0f0;
        }
        input[type="text"]:focus {
            cursor: text;
            background-color: #e7f3ff;
        }
        .button {
            display: inline-block;
            padding: 10px 20px;
            margin: 5px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .button:hover {
            background-color: #45a049;
            cursor: pointer;
        }
        .button:active {
            cursor: progress;
        }
        .button.loading {
            cursor: wait;
        }
        .resizable {
            width: 200px;
            height: 100px;
            padding: 20px;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            margin: 10px 0;
            resize: both;
            overflow: auto;
            cursor: move;
        }
        .resizable:hover {
            cursor: grab;
        }
        .resizable:active {
            cursor: grabbing;
        }
    </style>
</head>
<body>
    <h2>状态响应光标示例</h2>

    <div class="form-group">
        <label>正常输入框：</label>
        <input type="text" value="可编辑文本">
    </div>

    <div class="form-group">
        <label>禁用输入框：</label>
        <input type="text" value="禁用文本" disabled>
    </div>

    <div class="form-group">
        <button class="button">普通按钮</button>
        <button class="button loading">加载中按钮</button>
    </div>

    <div class="resizable">
        <p>可调整大小的元素 - 将鼠标移到边缘或角落拖动调整大小，在元素内部拖动移动位置</p>
    </div>

    <script>
        // 模拟按钮加载状态
        document.querySelectorAll('.button').forEach(button => {
            button.addEventListener('click', function() {
                if(this.classList.contains('loading')) {
                    this.classList.remove('loading');
                    this.textContent = '普通按钮';
                } else {
                    this.classList.add('loading');
                    this.textContent = '加载中...';

                    // 3秒后恢复原状
                    setTimeout(() => {
                        this.classList.remove('loading');
                        this.textContent = '普通按钮';
                    }, 3000);
                }
            });
        });
    </script>
</body>
</html>

6. 浏览器兼容性与最佳实践

6.1 浏览器兼容性

不同浏览器对cursor属性的支持存在差异，特别是在自定义光标方面。以下是主要浏览器对cursor属性的兼容性概况：

浏览器基本光标支持URL光标支持坐标定位支持
Chrome全支持支持常见图片格式支持
Firefox全支持支持常见图片格式支持
Safari全支持支持常见图片格式支持
Edge全支持支持支持
IE6.0+仅支持.cur等特定格式部分支持

6.2 最佳实践建议

  1. 提供备用光标：始终在自定义光标后提供备用系统光标
   cursor: url('custom.cur'), url('custom.png'), pointer;
  1. 控制光标尺寸：自定义光标图像建议不超过32×32像素
  2. 优化光标性能：避免使用过大或过多的自定义光标，以免影响页面加载性能
  3. 保持一致性：在整个网站或应用中保持相似元素的光标样式一致
  4. 考虑可访问性：确保光标变化不会干扰用户的浏览体验，特别是对于有运动敏感症的用户

以下是一个综合最佳实践的完整示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>光标最佳实践示例 - 找找网</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            max-width: 800px;
            margin: 0 auto;
        }
        .best-practice-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-top: 20px;
        }
        .practice-item {
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        /* 提供备用光标的良好实践 */
        .custom-with-fallback {
            cursor: url('small-cursor.cur'), url('small-cursor.png'), pointer;
        }

        /* 合适尺寸的光标 */
        .appropriately-sized {
            cursor: url('32x32-cursor.cur'), pointer;
        }

        /* 保持一致性 - 所有可点击元素使用相同光标 */
        .clickable {
            cursor: pointer;
        }

        /* 禁用状态明确反馈 */
        .disabled-state {
            cursor: not-allowed;
            background-color: #f0f0f0;
            color: #999;
        }

        /* 特殊操作明确标识 */
        .special-action {
            cursor: zoom-in;
        }
    </style>
</head>
<body>
    <h2>光标设计最佳实践示例</h2>

    <div class="best-practice-grid">
        <div class="practice-item custom-with-fallback">
            <h3>提供备用光标</h3>
            <p>自定义光标后总是提供备用系统光标</p>
        </div>

        <div class="practice-item appropriately-sized">
            <h3>合适的光标尺寸</h3>
            <p>使用不超过32×32像素的光标图像</p>
        </div>

        <div class="practice-item clickable">
            <h3>一致的可点击指示</h3>
            <p>所有可点击元素使用pointer光标</p>
        </div>

        <div class="practice-item disabled-state">
            <h3>明确的禁用状态</h3>
            <p>禁用元素使用not-allowed光标</p>
        </div>

        <div class="practice-item special-action">
            <h3>特殊操作标识</h3>
            <p>特殊功能使用对应光标(如zoom-in)</p>
        </div>

        <div class="practice-item">
            <h3>文本选择明确</h3>
            <p style="cursor: text;">可选择文本使用text光标</p>
        </div>
    </div>
</body>
</html>

7. 总结

CSS cursor属性是增强网页交互体验的重要工具。通过合理使用系统内置光标和创建自定义光标，可以有效传达元素的功能和状态，提升用户体验。

本篇教程知识点总结

知识点知识内容
cursor属性作用设置或检索在对象上移动的鼠标指针采用的光标形状
属性语法cursor: [url], [url], ... [通用光标];
常用系统光标default, pointer, text, move, wait, help, not-allowed等
自定义光标使用url()值指定自定义光标图像
备用光标策略提供多个光标值，浏览器从左到右尝试加载
光标尺寸建议自定义光标图像建议不超过32×32像素
浏览器兼容性不同浏览器对光标格式支持不同
高级光标应用可通过隐藏默认光标并使用JavaScript模拟复杂光标效果
状态响应光标结合伪类选择器为不同元素状态设置不同光标
最佳实践提供备用、控制尺寸、保持一致性、考虑可访问性

找找网提供的本教程详细介绍了CSS cursor属性的各个方面，从基础用法到高级技巧，帮助开发者全面掌握光标样式的应用，创建更具交互性和用户体验良好的网页应用。

, , ,