自定义鼠标光标：CSS cursor: url() 使用指南-html教程-PHP中文网

自定义鼠标光标：CSS cursor: url() 使用指南

霞舞

发布： 2025-09-17 19:24:02

原创

1033人浏览过

自定义鼠标光标：css cursor: url() 使用指南

本文旨在解决 CSS 中使用 cursor: url() 属性自定义鼠标光标时，图片无法正常显示的问题。文章将详细讲解 cursor: url() 的正确用法，包括提供备用光标、控制图片大小以及支持的图片格式等关键因素，并提供示例代码帮助开发者快速上手。

在使用 CSS 的 cursor 属性时，我们可以使用 url() 函数来指定自定义的鼠标光标。然而，有时我们会遇到图片无法正常显示为光标的情况。这通常是由于以下几个原因造成的：

1. 缺少备用光标

cursor: url() 属性要求在 URL 之后提供一个备用光标类型。这是为了在以下情况下确保光标能够正常显示：

立即学习“前端免费学习笔记（深入）”；

用户浏览器不支持指定的图片格式。
图片加载失败。

备用光标类型可以是以下预定义的 CSS 光标值之一，例如 pointer、default、hand、arrow 等。

示例：

body {
  cursor: url("image/grenouillerougelogo.png"), pointer;
}

登录后复制

在上面的例子中，如果 image/grenouillerougelogo.png 无法加载或浏览器不支持该图片格式，光标将回退到 pointer 类型。

2. 图片尺寸过大

浏览器对自定义光标的图片尺寸有限制。通常，图片尺寸应小于或等于 128x128 像素。如果图片尺寸过大，浏览器可能无法将其用作光标。

建议使用图像编辑软件将图片调整到合适的尺寸。

3. 图片格式不支持

标小兔AI写标书

一款专业的标书AI代写平台，提供专业AI标书代写服务，安全、稳定、速度快，可满足各类招投标需求，标小兔，写标书，快如兔。

查看详情

并非所有图片格式都受支持作为自定义光标。最常用的和最安全的格式是 .cur 和 .ani (动画光标) 。此外，一些浏览器可能支持 .png、.jpg 或 .gif，但支持程度可能因浏览器而异。为了保证最佳兼容性，建议使用 .cur 格式。

4. 路径问题

确保 url() 函数中指定的图片路径是正确的。相对路径是相对于 CSS 文件而言的。如果图片位于不同的目录中，请确保正确指定路径。

示例：

如果 CSS 文件位于 css/style.css，而图片位于 image/cursor.png，则正确的路径应该是：

body {
  cursor: url("../image/cursor.png"), auto;
}

登录后复制

完整示例：

<!DOCTYPE html>
<html>
<head>
<title>自定义光标</title>
<style>
body {
  cursor: url("cursor.png"), auto; /* 确保cursor.png文件存在并且大小合适 */
}

div {
  width: 200px;
  height: 100px;
  background-color: lightblue;
}
</style>
</head>
<body>

<div>鼠标悬停在此处</div>

</body>
</html>

登录后复制

注意事项：