鼠标悬停时能否修改Grab光标颜色？求技术解决方案

系统自带的grab光标是浏览器内置样式，无法通过style.color或CSScolor属性直接改色——这个属性只控制元素文本颜色，和光标完全无关。要实现红色Grab光标，得用自定义光标方案：

方法1：内嵌SVG自定义光标 #

直接用SVG生成红色的Grab图标，通过cursor属性引用，同时保留grab作为降级选项：

JavaScript直接设置 #

x.addEventListener('mouseover', () => {
  // 内嵌编码后的红色Grab SVG光标
  const redGrabCursor = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='red'%3E%3Cpath d='M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z'/%3E%3C/svg%3E"), grab`;
  x.style.cursor = redGrabCursor;
});

更优雅的CSS类方式 #

先定义CSS类：

.red-grab-cursor {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='red'%3E%3Cpath d='M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z'/%3E%3C/svg%3E"), grab;
}

再通过JS切换类：

x.addEventListener('mouseover', () => x.classList.add('red-grab-cursor'));
x.addEventListener('mouseout', () => x.classList.remove('red-grab-cursor'));

方法2：使用自定义图标文件 #

如果你有现成的红色Grab图标（PNG/WebP格式，推荐32x32px尺寸），直接引用文件路径：

.red-grab-cursor {
  cursor: url('/你的图标路径/red-grab.png'), grab;
}

关键注意点 #

• 必须加降级光标（比如grab），避免浏览器不支持自定义光标时显示异常
• SVG内容要做URL编码，否则浏览器可能解析失败
• 不同浏览器对自定义光标的支持略有差异，测试时覆盖Chrome、Firefox、Edge等主流浏览器

内容的提问来源于stack exchange，提问作者Marin Mirošević