I have a custom CSS animated cursor, that uses minimum JS to follow the real cursor.

The fake cursor is just an HTML element like anything else.

Since the fake cursor (element) is under the real cursor, CSS thinks you're always hovering it.

So if I hover/click a button, it will ignore both events.

What I imagine it to do is pass through the fake cursor, and go to the button event.

Here's a screenshot:

Here's a screenshot of the fake cursor going under the "PLAY" button:

As you can see here, the fake cursor goes under the button.

I know I can change it with z-index:

But now you can see the CSS does not detect the hover event on the button.

How can I have the z-index-effect on the page, while at the same time, detect all pointer events? (A.K.A. pass through the fake cursor)

Here's the full code for the cursor:

<style>
body,
html,
* {
    cursor: none !important
}

#follower #circle1,
#follower #circle2 {
    cursor: none !important;
    position: absolute;
    border-radius: 50%;
    height: 0;
    width: 0;
    margin-top: 0;
    margin-left: 0
}

*,
body,
html {
    cursor: none !important
}

#follower {
    position: absolute;
    top: 50%;
    left: 50%
}

#follower #circle1 {
    -webkit-animation: 2s infinite pulse;
    animation: 2s infinite pulse;
    background: #fff
}

#follower #circle2 {
    -webkit-animation: 4s infinite pulse;
    animation: 4s infinite pulse;
    background: rgba(0, 0, 0, .8)
}

@-moz-keyframes pulse {

    0%,
    100% {
        opacity: .2;
        height: 1em;
        width: 1em;
        margin-top: -.5em;
        margin-left: -.5em
    }

    50% {
        opacity: .9;
        height: 3em;
        width: 3em;
        margin-top: -1.5em;
        margin-left: -1.5em
    }
}

@-webkit-keyframes pulse {

    0%,
    100% {
        opacity: .2;
        height: 1em;
        width: 1em;
        margin-top: -.5em;
        margin-left: -.5em
    }

    50% {
        opacity: .9;
        height: 3em;
        width: 3em;
        margin-top: -1.5em;
        margin-left: -1.5em
    }
}

@-o-keyframes pulse {

    0%,
    100% {
        opacity: .2;
        height: 1em;
        width: 1em;
        margin-top: -.5em;
        margin-left: -.5em
    }

    50% {
        opacity: .9;
        height: 3em;
        width: 3em;
        margin-top: -1.5em;
        margin-left: -1.5em
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: .2;
        height: 1em;
        width: 1em;
        margin-top: -.5em;
        margin-left: -.5em
    }

    50% {
        opacity: .9;
        height: 3em;
        width: 3em;
        margin-top: -1.5em;
        margin-left: -1.5em
    }
}
</style>
<div id="follower">
    <div id="circle1"></div>
    <div id="circle2"></div>
</div>
<script>
    (function() {
        var t, n, e, o;
        t = document.getElementById("follower"), document.getElementById("printout"), n = function(t) {
            return t.clientX
        }, e = function(t) {
            return t.clientY
        }, o = function(o) {
            var u;
            return u = {
                x: n(o),
                y: e(o)
            }, t.style.top = u.y   "px", t.style.left = u.x   "px"
        }, window.onmousemove = function(t) {
            var n;
            return n = t, setTimeout((function() {
                return o(n)
            }), 1)
        }
    }).call(this);
</script>

If you would like to see it live, no worries: www.parkingmaster.ml

CodePudding user response：

Ok, the easiest solution would be to pass the pointer-events: none; to the css of the fake cursor which is just the html element like div so, it will do is remove the events like hover or any other cursor events from it.