如何实现图片特定区域鼠标悬停时显示Pointer Cursor？

你只需要新增一个mousemove事件监听，实时判断鼠标是否在目标区域内，动态切换光标样式即可，原有点击逻辑保留不变。

修改后的完整代码： #

JavaScript

let col = document.querySelectorAll('img#lights-on,img#lights-off');

// 原有点击切换图片逻辑
document.addEventListener("click", function(e) {
  if (
      e.target instanceof HTMLImageElement &&
      e.offsetX >= 0 &&
      e.offsetX <= 100 &&
      e.offsetY >= 0 &&
      e.offsetY <= 20) {
        
        col.forEach(img => {
          if (img && img.nodeType == 1) {
            img.style.display =
              ( img.style.display == '' || img.style.display == 'block' ) ?
                'none' : 'block';
          }
        })
  }
});

// 新增：鼠标悬停切换光标逻辑
document.addEventListener("mousemove", function(e) {
  if (e.target instanceof HTMLImageElement) {
    // 判断是否在左上角100x20的目标区域内
    const isHoverTargetArea = e.offsetX >= 0 && e.offsetX <= 100 && e.offsetY >= 0 && e.offsetY <= 20;
    // 动态设置光标样式
    e.target.style.cursor = isHoverTargetArea ? 'pointer' : 'default';
  }
});

CSS

img {
  width: 300px;
  border: 1px solid black;
}

HTML

<img
  id="lights-off"
  src="//www.collinsdictionary.com/images/thumb/apple_158989157_250.jpg" 
  style="display: none;"
>
<img
  id="lights-on"
  src="//upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Banana-Single.jpg/680px-Banana-Single.jpg"
>

关键说明： #

• 通过mousemove事件实时追踪鼠标位置，和点击逻辑复用相同的区域判断条件（左上角0-100px横向、0-20px纵向）
• 当鼠标进入目标区域时，给当前图片设置cursor: pointer，离开时恢复默认光标
• 完全兼容原有点击切换功能，不会影响原有逻辑的运行

内容的提问来源于stack exchange，提问作者andre