如何实现可见但不可交互元素？解决鼠标跟随Div遮挡点击问题

AI 小北

2026-7-22

问题解决：让跟随鼠标的Div可见但不遮挡交互

直接给结论：完全可以通过CSS实现，和它在body层级无关，只需要给这个.mouse类添加pointer-events: none属性即可。

这个CSS属性的作用是让元素不接收任何鼠标/触摸事件，事件会直接穿透到它下方的元素上，同时元素本身保持可见。

修改后的CSS代码：

.mouse {
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    border-radius: 40px;
    background-color: #ffff0055;
    z-index: 4;
    transform: translate(-35px, -35px);
    pointer-events: none; /* 新增这一行 */
}

补充说明

这个属性兼容性很好，几乎所有现代浏览器都支持，包括Astro框架渲染的页面，没有特殊限制。
如果后续你需要让这个div内部的某个子元素恢复交互，可以给子元素单独设置pointer-events: auto，这样只有子元素能接收事件，父元素依然保持穿透。

你提供的相关代码参考

Astro页面结构

<html lang="en">
    <body>
        <header>
            <TopBar />
        </header>
        <MenuOpenBtn />
        <slot />
        <script>
            import '../scripts/getScreenDimensions.js';
            import '../scripts/findMousePosition.js';
            import '../scripts/openMenu.js';
            import '../scripts/topBar.js';
            import '../scripts/findMenuPosition.js';
            import '../scripts/makeCursorHighlighter.js';
            import '../scripts/timer.js'
        </script>
    </body>
</html>

鼠标跟随逻辑代码

import currentMousePosition from "./findMousePosition";

let root = document.body;
const cursorHTML = document.createElement('div');
cursorHTML.classList.add('mouse')
root.appendChild(cursorHTML);

function moveCursor() {
  cursorHTML.style.top = `${currentMousePosition.Y}px`
  cursorHTML.style.left = `${currentMousePosition.X}px`
}

export default moveCursor;

定时器触发代码

import moveCursor from "./makeCursorHighlighter";

document.addEventListener("DOMContentLoaded", (e) =>
  timer(e, [moveCursor])
);

function timer(e, fnArr) {
  const int = setInterval(buffer, 50, [...fnArr]);
}

function buffer(fnArr) {
  for (let i = 0; i < fnArr.length; i++) {
    fnArr[i]();
  }
}

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