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

I am working on a project of mine and was playing around with the idea to make a custom cursor for my webpage. Unfortunately, it seems that I can't get it to work.

Can someone tell me what I am doing wrong here? I am using simple HTML, CSS and Javascript. I think it is the Javascript that's not working, but I have tried to use a debugger but no luck.

<!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>

CodePudding user response：

The code seems to work (at least, it does things though I don't know if they are the right things) as long as jquery is also loaded.

<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>

Note: run the snippet and select full screen mode