CSS 鼠标样式 - 绿叶网

在 CSS 中，我们可以使用 cursor 属性来定义鼠标样式。正确使用鼠标样式，可以提高网站的可交互性和用户体验。

其中，CSS 鼠标样式可以分为以下 2 种。

浏览器鼠标样式。
自定义鼠标样式。

CSS 浏览器鼠标样式

在 CSS 中，我们可以使用 cursor 属性来定义鼠标样式。

语法：

cursor: 关键字;

说明：

cursor 属性的取值有很多，如下表所示。

浏览器鼠标样式
属性值	外观
default（默认值）	箭头光标
pointer	手型光标
text	I 形文本选择光标
crosshair	十字光标
wait	等待光标（沙漏或圆圈）
help	箭头加问号光标
move	四向箭头光标
not-allowed	禁止符号光标
grab	抓取手型光标
grabbing	抓紧手型光标
auto	浏览器根据上下文选择
e-resize 或 w-resize	水平调整光标
n-resize 或 s-resize	垂直调整光标
ne-resize 或 sw-resize	右上 / 左下对角调整光标
nw-resize 或 se-resize	左上 / 右下对角调整光标

看到这里，估计小伙伴们都惊呆了：“shit！这么多属性值，咋记得住啊！” 其实大家不用担心，在实际开发中我们一般只会用到 3 个：default、pointer 和 text。其他的很少用得上，所以就不需要去记忆了。

示例 1：使用浏览器鼠标样式

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 30px;
            line-height: 30px;
            margin: 10px;
            text-align: center;
            background-color: hotpink;
            color: white;
            font-size: 14px;
        }
        .default {
            cursor: default;
        }
        .pointer {
            cursor: pointer;
        }
        .text {
            cursor: text;
        }
    </style>
</head>
<body>
    <div class="default">默认样式</div>
    <div class="pointer">手状样式</div>
    <div class="text">文本样式</div>
</body>
</html>

页面效果如下图所示。

CSS 使用浏览器鼠标样式

分析：

小伙伴们可以自行将鼠标移到不同的 div 元素上，会发现它们的鼠标样式是不一样的。

示例 2：隐藏鼠标光标

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .canvas {
            width: 100px;
            height: 100px;
            background-color: lightseagreen;
            cursor: none;
        }
    </style>
</head>
<body>
    <div class="canvas"></div>
</body>
</html>

页面效果如下图所示。

CSS 隐藏鼠标光标

分析：

使用 cursor: none; 可以用于隐藏鼠标光标，常用于自定义游戏光标或全屏应用。

CSS 自定义鼠标样式

在 CSS 中，除了使用浏览器自带的鼠标样式，我们还可以使用 cursor 属性来自定义鼠标样式。只不过语法稍微有点不一样。

语法：

cursor: url(图片地址), 属性值;

说明：

这里的图片支持 .cur、.png、.gif 等格式，推荐大小为 32 x 32 像素以确保清晰。需要注意的是：

.cur 文件在桌面浏览器支持良好，但在移动端可能无效，建议使用 .png 作为备选。
图片需预加载或托管在可靠的 CDN 以避免加载延迟。

然后上面的 “属性值” 一般也只有 3 种：default、pointer 和 text。

示例 3：自定义鼠标样式

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        div {
            width: 100px;
            height: 30px;
            line-height: 30px;
            margin: 10px;
            text-align: center;
            background-color: hotpink;
            color: white;
            font-size: 14px;
        }
        #div-default { cursor: url(imgs/cursor/default.png),default; }
        #div-pointer { cursor: url(imgs/cursor/pointer.png),pointer; }
    </style>
</head>
<body>
    <div id="div-default">鼠标默认样式</div>
    <div id="div-pointer">鼠标手状样式</div>
</body>
</html>

页面效果如下图所示。

CSS 自定义鼠标样式

分析：

使用 CSS 自定义鼠标样式，可以打造更有个性的个人网站，不仅美观大方，也能更好地匹配网站的风格。

CSS 动态鼠标样式

在实际项目开发中，我们可以通过 CSS 的 :hover 伪类或 JavaScript 来动态切换鼠标样式，以增强交互性。

示例 4：CSS 实现动态鼠标样式

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 150px;
            height: 40px;
            line-height: 40px;
            margin: 20px;
            text-align: center;
            background-color: darkcyan;
            color: white;
            font-size: 14px;
            cursor: default;
        }
        .box:hover {
            cursor: pointer;
            background-color: lightseagreen;
        }
        .disabled:hover {
            cursor:not-allowed;
            opacity: 0.6;
        }
    </style>
</head>
<body>
    <div class="box">可点击</div>
    <div class="disabled">已禁用</div>
</body>
</html>

页面效果如下图所示。

CSS 动态鼠标样式

分析：

在上面例子中，我们使用 :hover 来实现鼠标样式的动态变化，并结合背景色变化增强反馈效果。cursor: not-allowed; 表示禁用状态，适合表单按钮或不可用链接。