无法让自定义光标在 HTML 中正常工作

Question

我正在做我的一个项目，正在考虑为我的网页制作自定义光标的想法。不幸的是，我似乎无法让它工作。

有人能告诉我我做错了什么吗？我使用的是简单的 HTML、CSS 和 Javascript。我认为是 Javascript 不起作用，但我尝试使用调试器但没有成功。

<!DOCTYPE html>

<html lang="en">
    <head>
        <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>
            const cursor = document.querySelector(".cursor");

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

            var $c = $("[data-custom-cursor]");
            var $h = $("a, button");
            var $i = $("img");

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

            $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");
            });
            //# sourceURL=pen.js
        </script>
    </body>
</html>

Answer 1

只要还加载了 jquery，代码似乎就可以工作（至少，它可以执行某些操作，但我不知道它们是否正确）。

<html lang="en"><head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/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="" style="transform: matrix(1, 0, 0, 1, 1128, 590);">
                <div class="cursor" style="top: 596px; left: 1118px;"></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>
            const cursor = document.querySelector(".cursor");

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

            var $c = $("[data-custom-cursor]");
            var $h = $("a, button");
            var $i = $("img");

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

            $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");
            });
            //# sourceURL=pen.js
        </script>
    
</body></html>

注意：运行代码段和 select 全屏模式

无法让自定义光标在 HTML 中正常工作

Can't get the custom cursor to work properly in HTML

javascript

html

css

web-site-project