文章/答案/技术大牛

发布

社区首页 >问答首页 >无法使自定义游标在HTML中正常工作

问无法使自定义游标在HTML中正常工作
EN

Stack Overflow用户

提问于 2021-12-01 20:19:40

回答 1查看 63关注 0票数 0

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

有人能告诉我我在这里做错了什么吗？我使用简单的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>

javascript

html

css

web-site-project

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-12-01 20:44:57

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

注意:运行代码片段并选择全屏模式。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70190733

复制

相似问题

问无法使自定义游标在HTML中正常工作
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法使自定义游标在HTML中正常工作EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法使自定义游标在HTML中正常工作
EN