如何将Cursor.svg文件正确放置以在网页上显示自定义光标？

Question

如何将Cursor.svg文件正确放置以在网页上显示自定义光标？

发布于
2025-09-01 河北

更新于
2025-09-02

我的index.php是：

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavaScript for PHP Developers - Episode 01</title>
        <link rel="stylesheet" href="../assets/site.css">
</head>
<body>
        <div id="divleft">Hello, this is content on the left.</div>
        <div id="divright">Hello, this is content on the right.</div>
</body>
</html>

我的assets/site.css是：

#divleft {
    cursor: wait;
    margin: 10px;
    float: left;
    height: 250px;
    width: 30%;
    border: 10px solid #ccff00;
    background-color: #f2aad1;
}

#divright {
    cursor: url('Cursor.svg'), progress;
    margin: 10px;
    height: 260px;
    border: 10px solid #00ffcc;
    background-color: #ffff00;
}

请问我的Cursor.svg文件放在哪里才能将鼠标放置时正常显示啊？

css cursor php

阅读 1.1k

AI BotBETA

要正确显示自定义光标，请将Cursor.svg文件放在与CSS文件相同的assets目录下，并检查以下实现细节：

正确文件路径结构：

项目根目录/
├── index.php
├── assets/
│   ├── site.css
│   └── Cursor.svg   <-- 光标文件需放在这里

修复的CSS代码（已在原代码中实现）：

#divright {
    cursor: url('Cursor.svg'), progress; /* 相对于CSS文件的路径 */
    ...其他样式
}

关键注意事项：

路径解析规则：
- url('Cursor.svg') 中的路径是相对于当前CSS文件(site.css)的位置
- 因此光标文件必须与site.css在相同目录（assets文件夹）

HTML文件修复：
在index.php中修复右引号缺失错误（会导致CSS不生效）：

<!-- 原代码有误 --> 
<div id="divright> 
<!-- 修正后 -->
<div id="divright">  <!-- 注意添加右引号 -->

浏览器限制：
- SVG文件尺寸需小于128×128像素（部分浏览器要求）
- 建议提供备用光标（如原代码中的progress）
- 测试不同浏览器支持度（Firefox/Chrome支持最好）
故障排除：
```
/* 测试光标加载：添加此规则到site.css */
body { cursor: url('Cursor.svg'), auto; }
```
- 如果全页面生效，说明路径正确
- 检查浏览器控制台是否有Failed to load resource错误
备选方案：
若需从其他目录引用，使用绝对路径：
```
cursor: url('/path/to/Cursor.svg'), progress;
```