如何不修改HTML结构，仅hover背景图时切换为pointer光标？

纯CSS方案（推荐） #

利用CSS伪元素模拟可点击的背景图区域，无需修改HTML结构，批量生效：

.checkbox-container {
    margin: 20px 0px;
    background-image: url(/ui-icons/Checbox-Not-Selected-Grey.png);
    background-repeat: no-repeat;
    background-position: top left;
    padding-left: 40px;
    position: relative; /* 为伪元素定位提供基准 */
}

.checkbox-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40px; /* 和padding-left值匹配，覆盖背景图水平范围 */
    height: 100%; /* 垂直方向占满父元素，覆盖背景图区域 */
    cursor: pointer;
    /* 可选：调试时可添加半透明背景查看区域范围 */
    /* background: rgba(255,0,0,0.1); */
}

原理是给每个.checkbox-container左上角生成一个和背景图区域完全重合的伪元素，鼠标悬停该区域时自动切换为pointer光标，完全不干扰原有文本和链接的交互。

JavaScript方案（适配复杂交互场景） #

如果需要在点击背景图区域时执行额外逻辑，或背景图尺寸不固定，可通过JS监听鼠标位置实现：

// 获取所有目标容器
const containers = document.querySelectorAll('.checkbox-container');

containers.forEach(container => {
    container.addEventListener('mousemove', function(e) {
        const rect = this.getBoundingClientRect();
        // 计算鼠标在容器内的水平偏移量
        const mouseInContainerX = e.clientX - rect.left;
        // 判断是否处于背景图对应的左侧40px区域内
        this.style.cursor = mouseInContainerX <= 40 ? 'pointer' : 'default';
    });

    // 鼠标离开容器时恢复默认光标
    container.addEventListener('mouseleave', function() {
        this.style.cursor = 'default';
    });
});

这段代码会实时检测鼠标位置，动态切换光标样式，同时支持后续扩展点击事件逻辑。

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