如何不替换默认鼠标指针，为其附加图标以提示用户可右键点击

实现思路 #

不需要修改系统默认光标样式，通过额外创建一个跟随鼠标移动的悬浮图标元素，仅在目标元素悬停时显示，即可实现附加提示效果。

完整代码示例 #

<!-- 右键提示图标元素，全局仅需要一个 -->
<div id="rightClickTip" style="display: none; position: fixed; pointer-events: none; z-index: 9999; width: 16px; height: 16px;">
  <!-- 这里可以替换成你自己的右键提示图标，示例用emoji代替 -->
  🖱️
</div>

<!-- 目标触发元素 -->
<div class="right-click-target" style="padding: 20px; border: 1px solid #ccc;">
  悬停此处查看右键提示
</div>

<script>
const tipEl = document.getElementById('rightClickTip')
const targetEls = document.querySelectorAll('.right-click-target')

// 鼠标移动时更新提示图标位置
document.addEventListener('mousemove', e => {
  // 12px 是偏移量，避免遮挡默认光标
  tipEl.style.left = `${e.clientX + 12}px`
  tipEl.style.top = `${e.clientY + 12}px`
})

// 给所有目标元素绑定悬停事件
targetEls.forEach(el => {
  // 进入元素时显示提示
  el.addEventListener('mouseenter', () => {
    tipEl.style.display = 'block'
  })
  // 离开元素时隐藏提示
  el.addEventListener('mouseleave', () => {
    tipEl.style.display = 'none'
  })
})
</script>

关键配置说明 #

• 必须给提示图标设置pointer-events: none属性，确保图标不会拦截任何鼠标交互，不会影响原元素的点击、右键菜单等操作
• 无需修改任何cursor相关CSS属性，完全保留各平台系统默认光标样式
• 可以根据需求自定义提示图标的样式、内容、偏移量，适配不同的设计需求

内容的提问来源于stack exchange，提问作者Mihkel L.