如何让自定义CSS动画光标穿透指针事件并保留z-index效果？

问题描述 #

我制作了一个自定义CSS动画光标，通过少量JS跟随真实光标移动。该伪光标是普通HTML元素，因处于页面元素上方，导致按钮的hover/点击事件被它拦截。我希望伪光标能穿透指针事件，让按钮正常响应，同时保留z-index的视觉层级效果。

相关截图 #

• 页面整体效果
• 伪光标覆盖在“PLAY”按钮上
• 调整z-index后的效果

解决方案 #

核心是给伪光标容器及内部元素添加pointer-events: none;属性，该属性会让元素完全不响应任何指针事件，鼠标操作直接穿透到下方元素，同时不影响元素的视觉层级（z-index依然生效）。

修改后的完整代码 #

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

#follower,
#follower #circle1,
#follower #circle2 {
    cursor: none !important;
    pointer-events: none; /* 让伪光标穿透指针事件 */
}

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

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

关键修改说明 #

• 给#follower、#circle1、#circle2添加pointer-events: none;，让伪光标元素不再拦截任何指针事件，鼠标操作会直接作用到下方的按钮等交互元素上。
• 保留原有动画、定位及视觉样式，确保伪光标依然保持在页面视觉层级的上层，不影响动画效果。

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