HTML网页自定义光标无法正常生效问题求助，附完整实现代码

错误点 #

• 缺失jQuery依赖：代码中使用了$()、.on()、.css()等jQuery专属语法，但页面没有引入jQuery库，导致相关JS全部执行失败
• 无效的光标定位逻辑：你同时写了两套鼠标移动监听，其中原生JS监听试图修改内层.cursor的top/left属性，但.cursor没有设置position定位规则，偏移属性不会生效，还会和外层定位逻辑冲突
• 光标位置错位：外层.custom-cursor的transform偏移未做修正，自定义光标会和实际鼠标位置不重合

修复方法 #

1. 在</head>标签前添加jQuery引入代码：

<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>

2. 删除冗余无效的原生JS鼠标监听代码，即以下片段：

const cursor = document.querySelector(".cursor");
document.addEventListener("mousemove", (e) => {
    cursor.setAttribute(
        "style",
        "top: " + (e.pageY - 10) + "px; left: " + (e.pageX - 10) + "px;"
    );
});

3. 修正jQuery部分的光标定位偏移，调整mousemove回调内的transform参数：

$(window).on("mousemove", function (e) {
    x = e.clientX;
    y = e.clientY;
    // 修正偏移让光标中心对齐鼠标位置
    $c.css("transform", `matrix(1, 0, 0, 1, ${x - 20}, ${y - 20})`);
});

修复后完整代码 #

<!DOCTYPE html>
<html lang="en">
    <head>
        <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
        <style>
            * {
                box-sizing: border-box;
                cursor: none;
            }

            body {
                background: #000;
                color: #fff;
            }
            a {
                color: #fff;
                text-decoration: none;
            }

            a:hover {
                text-decoration: underline;
            }
            .custom-cursor {
                position: fixed;
                top: -18px;
                left: -18px;
                display: block;
                width: 120px;
                height: 120px;
                pointer-events: none;
                will-change: transform;
                z-index: 998;
                -webkit-transform: matrix(1, 0, 0, 1, -100, -100);
                transform: matrix(1, 0, 0, 1, -100, -100);
                opacity: 0;
                mix-blend-mode: difference;

                transition: transform 0.15s cubic-bezier(0, 0.89, 0.49, 0.92),
                    opacity 0.4s ease;
            }

            .custom-cursor .cursor {
                transform: scale(0.45);
                transition: transform 0.5s ease;
                will-change: transform;
                width: 120px;
                height: 120px;
                float: left;
                border-radius: 100%;
                margin-top: -40px;
                margin-left: -40px;
                background: #fff;
            }

            .custom-cursor.custom-cursor-active .cursor {
                -webkit-transform: scale(1);
                transform: scale(1);
                opacity: 1;
            }

            .custom-cursor.custom-cursor-active-img {
                z-index: 1010;
            }

            .custom-cursor.custom-cursor-active-img .cursor {
                -webkit-transform: scale(1);
                transform: scale(1);
                opacity: 1;
                background: #ff0;
            }
            body:hover .custom-cursor {
                opacity: 1;
            }

            @media screen and (max-width: 1200px) {
                .custom-cursor {
                    display: none !important;
                }
            }

            .center {
                padding: 30vh;
                text-align: center;
                width: 100%;
                position: relative;
                z-index: 9999;
            }

            .content {
                padding: 1em;
                font-family: sans-serif;
                font-size: 3em;
                background: #000;
                min-height: 100vh;
            }

            .content::before {
                position: fixed;
                background: #ff0;
                mix-blend-mode: multiply;
                content: "";
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 999;
                pointer-events: none;
            }
            .img-wrapper {
                max-width: 450px;
                padding: 100px 0;
            }
            .img {
                position: relative;
                z-index: 1000;
            }
        </style>
    </head>

    <body>
        <div class="content">
            <div class="custom-cursor" data-custom-cursor>
                <div class="cursor"></div>
            </div>

            <h1>hello world</h1>
            <a href="#">link 0</a> / <a href="#">link 1</a> /
            <a href="#">link 2</a> / <a href="#">link 3</a> /
            <a href="#">link 4</a> / <a href="#">link 5</a> /
            <a href="#">link 6</a> / <a href="#">link 7</a> /
            <a href="#">link 8</a> .
        </div>
        <script>
            var $c = $("[data-custom-cursor]");
            var $h = $("a, button");
            var $i = $("img");

            $(window).on("mousemove", function (e) {
                x = e.clientX;
                y = e.clientY;
                $c.css("transform", "matrix(1, 0, 0, 1, " + (x - 20) + "," + (y - 20) + ")");
            });

            $h.on("mouseenter", function (e) {
                $c.addClass("custom-cursor-active");
            });

            $h.on("mouseleave", function (e) {
                $c.removeClass("custom-cursor-active");
            });

            $i.on("mouseenter", function (e) {
                $c.addClass("custom-cursor-active-img");
            });
            $i.on("mouseleave", function (e) {
                $c.removeClass("custom-cursor-active-img");
            });
        </script>
    </body>
</html>

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