Custom Cursor插件更新后，.no-cursor图片隐藏光标功能失效求助

我在测试网站上有多个带有.no-cursor类的图片，原本使用以下JavaScript代码实现鼠标悬停这些图片时隐藏所有鼠标指针（包括自定义光标），此前运行正常，但Custom Cursor插件更新后功能失效，请求排查原因。

原代码如下：

var elements = document.getElementsByClassName("no-cursor");
var style;

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener("mouseover", function() {
        style = document.createElement("style");
        style.innerHTML = "body.cursor-element-shape a { cursor: none !important; } .wpcc-active > .wpcc-cursor { display: none !important; }";
        document.head.appendChild(style);
    });
  
    elements[i].addEventListener("mouseleave", function() {
        document.head.removeChild(style);
    });
}

可能的失效原因 #

• 插件样式优先级提升：Custom Cursor更新后可能修改了自定义光标的CSS选择器，或者给光标样式新增了更高优先级的!important声明，导致你的自定义样式无法覆盖插件规则。
• 全局变量style作用域冲突：原代码中style是全局变量，当多个.no-cursor元素触发mouseover时，后续创建的style节点会覆盖之前的引用，导致mouseleave时可能移除错误的节点，甚至因为找不到节点报错。
• 插件DOM结构变更：更新后的插件可能调整了自定义光标的DOM层级或类名，原代码中的.wpcc-active > .wpcc-cursor选择器不再匹配新的DOM元素，无法隐藏自定义光标。
• 事件绑定时机不匹配：如果插件更新后延迟了自定义光标的渲染，你的代码可能在插件元素生成前就完成了事件绑定，或者插件的事件监听覆盖了你的鼠标事件。

修复建议 #

1. 修复全局变量作用域问题
   将style变量移到事件监听内部，并给样式节点加唯一标识，确保每个元素的悬停/离开操作对应正确的样式节点：

var elements = document.getElementsByClassName("no-cursor");

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener("mouseover", function() {
        var style = document.createElement("style");
        style.innerHTML = "body.cursor-element-shape a { cursor: none !important; } .wpcc-active .wpcc-cursor { display: none !important; }";
        style.dataset.noCursorStyle = "true";
        document.head.appendChild(style);
    });
  
    elements[i].addEventListener("mouseleave", function() {
        var style = document.querySelector('style[data-no-cursor-style="true"]');
        if (style) {
            document.head.removeChild(style);
        }
    });
}

2. 提升CSS选择器优先级
   使用更具体的选择器覆盖插件样式，比如：

html.wpcc-active .wpcc-cursor {
    display: none !important;
}
body.cursor-element-shape a,
body.cursor-element-shape * {
    cursor: none !important;
}

3. 适配插件新DOM结构
   打开浏览器开发者工具，查看自定义光标的新DOM结构，修改选择器匹配新元素。例如如果插件现在用#wpcc-cursor作为光标容器ID，就把选择器改为#wpcc-cursor { display: none !important; }。

4. 确保代码在插件加载后执行
   将代码放在页面底部，或者监听DOMContentLoaded事件，保证在插件元素生成后再绑定事件：

document.addEventListener('DOMContentLoaded', function() {
    var elements = document.getElementsByClassName("no-cursor");
    // 后续事件绑定逻辑...
});

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