CSS cursor 鼠标指针-代码号

CSS cursor 属性详解与应用指南

光标属性概述

CSS cursor 属性用于控制鼠标指针在元素上的显示样式，为用户提供直观的交互反馈。通过合理设置光标样式，可以显著提升用户体验和界面交互的直观性。

属性特性

默认值：auto
继承性：是
动画支持：否
版本：CSS2
JavaScript语法：object.style.cursor="value"

基础语法

selector {
    cursor: value;
}

常用光标值详解

1. 基本光标类型

/* 默认光标 */
.default-cursor {
    cursor: default;
}

/* 指针光标（链接状态） */
.pointer-cursor {
    cursor: pointer;
}

/* 文本选择光标 */
.text-cursor {
    cursor: text;
}

/* 等待加载光标 */
.wait-cursor {
    cursor: wait;
}

/* 帮助提示光标 */
.help-cursor {
    cursor: help;
}

2. 调整大小光标

/* 水平调整 */
.col-resize {
    cursor: col-resize;
}

/* 垂直调整 */
.row-resize {
    cursor: row-resize;
}

/* 双向调整 */
.move-cursor {
    cursor: move;
}

/* 对角线调整 */
.se-resize {
    cursor: se-resize;
}

.nw-resize {
    cursor: nw-resize;
}

3. 交互状态光标

/* 禁止操作 */
.not-allowed {
    cursor: not-allowed;
}

/* 抓取状态 */
.grab-cursor {
    cursor: grab;
}

.grabbing-cursor {
    cursor: grabbing;
}

/* 复制状态 */
.copy-cursor {
    cursor: copy;
}

应用实例演示

示例1：交互按钮光标效果

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <style>
        .button-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            padding: 40px;
            max-width: 1000px;
            margin: 0 auto;
        }
        
        .btn {
            padding: 15px 30px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 500;
            transition: all 0.3s ease;
            text-align: center;
        }
        
        /* 不同状态的光标效果 */
        .clickable {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            cursor: pointer;
        }
        
        .clickable:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
        }
        
        .disabled {
            background-color: #bdc3c7;
            color: #7f8c8d;
            cursor: not-allowed;
        }
        
        .loading {
            background-color: #3498db;
            color: white;
            cursor: wait;
        }
        
        .help-btn {
            background-color: #2ecc71;
            color: white;
            cursor: help;
        }
        
        .drag-btn {
            background-color: #e74c3c;
            color: white;
            cursor: grab;
        }
        
        .drag-btn:active {
            cursor: grabbing;
        }
    </style>
</head>
<body>
    <div class="button-container">
        <div class="btn clickable">可点击按钮 (pointer)</div>
        <div class="btn disabled">禁用状态 (not-allowed)</div>
        <div class="btn loading">加载中 (wait)</div>
        <div class="btn help-btn">帮助信息 (help)</div>
        <div class="btn drag-btn">拖拽元素 (grab)</div>
    </div>
</body>
</html>

示例2：数据表格交互光标

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <style>
        .data-table {
            width: 100%;
            border-collapse: collapse;
            margin: 30px 0;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        
        .data-table th,
        .data-table td {
            padding: 12px;
            border: 1px solid #ddd;
            text-align: left;
        }
        
        .data-table th {
            background-color: #34495e;
            color: white;
            cursor: default;
        }
        
        /* 可排序列 */
        .sortable {
            cursor: ns-resize;
        }
        
        .sortable:hover {
            background-color: #2c3e50;
        }
        
        /* 可调整列宽 */
        .resizable {
            cursor: col-resize;
            position: relative;
        }
        
        .resizable::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 3px;
            height: 100%;
            background-color: #3498db;
            cursor: col-resize;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .resizable:hover::after {
            opacity: 1;
        }
        
        /* 可编辑单元格 */
        .editable {
            cursor: text;
            background-color: #ecf0f1;
        }
        
        .editable:hover {
            background-color: #d6eaf8;
        }
        
        /* 链接单元格 */
        .link-cell {
            cursor: pointer;
            color: #3498db;
        }
        
        .link-cell:hover {
            text-decoration: underline;
            background-color: #ebf5fb;
        }
    </style>
</head>
<body>
    <table class="data-table">
        <thead>
            <tr>
                <th class="sortable">姓名 ↕</th>
                <th class="resizable">部门</th>
                <th class="resizable">职位</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="editable">张明</td>
                <td>技术部</td>
                <td>前端工程师</td>
                <td>在职</td>
                <td class="link-cell">查看详情</td>
            </tr>
            <tr>
                <td class="editable">李华</td>
                <td>设计部</td>
                <td>UI设计师</td>
                <td>休假</td>
                <td class="link-cell">查看详情</td>
            </tr>
            <tr>
                <td class="editable">王芳</td>
                <td>产品部</td>
                <td>产品经理</td>
                <td>在职</td>
                <td class="link-cell">查看详情</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

示例3：自定义光标图像

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <style>
        .custom-cursor-section {
            padding: 60px 20px;
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            text-align: center;
            color: white;
        }
        
        .cursor-demo {
            display: inline-block;
            margin: 20px;
            padding: 30px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
        }
        
        .cursor-demo:hover {
            transform: scale(1.05);
            background: rgba(255, 255, 255, 0.2);
        }
        
        /* 自定义光标 */
        .pencil-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="%233498db" d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>'), 
                    auto;
        }
        
        .brush-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="%23e74c3c" d="M7 14c-1.66 0-3 1.34-3 3 0 1.31-1.16 2-2 2 .92 1.22 2.49 2 4 2 2.21 0 4-1.79 4-4 0-1.66-1.34-3-3-3zm13.71-9.37l-1.34-1.34c-.39-.39-1.02-.39-1.41 0L9 12.25 11.75 15l8.96-8.96c.39-.39.39-1.02 0-1.41z"/></svg>'), 
                    auto;
        }
        
        .magnify-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="%232ecc71" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>'), 
                    auto;
        }
        
        .demo-title {
            font-size: 1.2em;
            margin-bottom: 10px;
            font-weight: 600;
        }
        
        .demo-desc {
            font-size: 0.9em;
            opacity: 0.8;
        }
    </style>
</head>
<body>
    <div class="custom-cursor-section">
        <h2>自定义光标效果演示</h2>
        <div class="cursor-demo pencil-cursor">
            <div class="demo-title">铅笔光标</div>
            <div class="demo-desc">适用于绘图或编辑操作</div>
        </div>
        
        <div class="cursor-demo brush-cursor">
            <div class="demo-title">画笔光标</div>
            <div class="demo-desc">适用于绘画或设计操作</div>
        </div>
        
        <div class="cursor-demo magnify-cursor">
            <div class="demo-title">放大镜光标</div>
            <div class="demo-desc">适用于查看或搜索操作</div>
        </div>
    </div>
</body>
</html>

示例4：输入框光标颜色控制

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <style>
        .form-container {
            max-width: 600px;
            margin: 40px auto;
            padding: 30px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            font-family: 'Microsoft YaHei', sans-serif;
        }
        
        .form-group {
            margin-bottom: 25px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #2c3e50;
        }
        
        input, textarea {
            width: 100%;
            padding: 12px;
            border: 2px solid #bdc3c7;
            border-radius: 6px;
            font-size: 16px;
            transition: all 0.3s ease;
        }
        
        input:focus, textarea:focus {
            outline: none;
            border-color: #3498db;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
        }
        
        /* 不同光标颜色 */
        .default-caret {
            caret-color: auto; /* 浏览器默认 */
        }
        
        .blue-caret {
            caret-color: #3498db; /* 蓝色光标 */
        }
        
        .red-caret {
            caret-color: #e74c3c; /* 红色光标 */
        }
        
        .green-caret {
            caret-color: #2ecc71; /* 绿色光标 */
        }
        
        .custom-caret {
            caret-color: #9b59b6; /* 紫色光标 */
        }
        
        .submit-btn {
            width: 100%;
            padding: 15px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
        }
    </style>
</head>
<body>
    <div class="form-container">
        <h2>用户信息表单</h2>
        
        <div class="form-group">
            <label>默认光标颜色</label>
            <input type="text" class="default-caret" placeholder="输入您的姓名">
        </div>
        
        <div class="form-group">
            <label>蓝色光标</label>
            <input type="email" class="blue-caret" placeholder="输入您的邮箱">
        </div>
        
        <div class="form-group">
            <label>红色光标</label>
            <input type="tel" class="red-caret" placeholder="输入您的电话">
        </div>
        
        <div class="form-group">
            <label>绿色光标</label>
            <input type="password" class="green-caret" placeholder="输入密码">
        </div>
        
        <div class="form-group">
            <label>自定义紫色光标</label>
            <textarea class="custom-caret" rows="4" placeholder="请输入您的留言..."></textarea>
        </div>
        
        <button type="submit" class="submit-btn">提交信息</button>
    </div>
</body>
</html>

本节课程知识要点

核心技术掌握

光标类型选择：根据交互场景选择合适的cursor值
自定义光标：使用URL值引入自定义光标图像
光标颜色控制：使用caret-color属性设置输入框光标颜色
回退方案：为自定义光标提供备用光标类型

设计原则建议

一致性：保持相似交互元素的光标样式统一
直观性：选择能准确反映操作意图的光标类型
可访问性：确保光标变化不会影响用户体验
适度使用：避免过度使用自定义光标影响性能

性能优化提示

自定义光标图像尺寸不宜过大
使用SVG格式替代位图以获得更好性能
避免频繁改变光标样式
提供适当的备用光标值

浏览器兼容性处理

/* 渐进增强方案 */
.custom-cursor {
    cursor: url('custom.cur'), auto;
    cursor: url('custom.svg'), auto;
}

/* 传统浏览器备用方案 */
@supports not (cursor: url('custom.svg')) {
    .custom-cursor {
        cursor: pointer; /* 备用光标 */
    }
}

实用技巧与实践

1. 响应式光标设计

/* 移动设备优化 */
@media (hover: none) and (pointer: coarse) {
    .custom-cursor {
        cursor: default; /* 触mō设备使用默认光标 */
    }
}

2. 光标状态管理

/* 不同状态的光标变化 */
.draggable {
    cursor: grab;
}

.draggable:active {
    cursor: grabbing;
}

.draggable.dragging {
    cursor: grabbing;
}

3. 高级光标效果

/* 多光标回退方案 */
.advanced-cursor {
    cursor: url('custom.svg') 15 15, pointer;
    /* 自定义光标 + 坐标偏移 + 备用光标 */
}

/* 动画光标 */
.animated-cursor {
    cursor: url('frame1.svg'), url('frame2.svg'), pointer;
    animation: cursorAnimation 1s infinite;
}

@keyframes cursorAnimation {
    0%, 100% { cursor: url('frame1.svg'), pointer; }
    50% { cursor: url('frame2.svg'), pointer; }
}

总结

CSS cursor 属性是提升用户体验的重要工具，通过合理运用可以：

提供直观反馈：通过光标变化提示用户当前可执行的操作
增强交互体验：为不同交互场景提供合适的光标样式
提升专业性：自定义光标增强品牌识别度和专业感
改善可用性：清晰的光标状态帮助用户理解界面功能

关键实践要点：

根据元素功能选择合适的光标类型
为触mō设备提供适当的备用方案
控制自定义光标的文件大小和性能影响
测试不同浏览器的兼容性表现

通过掌握 cursor 属性的各种应用技巧，开发者能够创建出更加直观和用户友好的网页界面。

本文标签：

CSS cursor 鼠标指针

CSS cursor 属性详解与应用指南

光标属性概述

属性特性

基础语法

常用光标值详解

1. 基本光标类型

2. 调整大小光标

3. 交互状态光标

应用实例演示

示例1：交互按钮光标效果

示例2：数据表格交互光标

示例3：自定义光标图像

示例4：输入框光标颜色控制

本节课程知识要点

核心技术掌握

设计原则建议

性能优化提示

浏览器兼容性处理

实用技巧与实践

1. 响应式光标设计

2. 光标状态管理

3. 高级光标效果

总结

感谢您的认可和支持