如何在需检测鼠标悬停的元素下方启用指针事件？（dHTML）

你的核心矛盾在于：既要让隐藏侧边栏的区域允许点击穿透到下方元素，又要在这个区域检测鼠标hover来显示恢复按钮。关键是把这两个功能拆分开，用不同的元素来承担，而不是让一个元素既要做穿透又要做检测。

修改方案步骤： #

• 给隐藏侧边栏容器设置pointer-events: none，确保点击能完全穿透到下方元素；
• 在容器内添加一个仅用于检测hover的透明子元素，给它设置pointer-events: auto，专门负责监听鼠标的进入/离开事件；
• 给恢复按钮单独设置pointer-events: auto，保证它可以被正常点击；
• 把原来绑定在容器上的hover、鼠标移动事件，转移到这个检测子元素上。

修改后的完整代码 #

HTML #

<!DOCTYPE html>
<html>
<head>
 <title>Hello, World!</title>
 <link rel="stylesheet" href="styles.css" />
 <script src="script.js" type="text/javascript" charset="utf-8" defer></script>
</head>
<body>
 <h1 class="title">Some content</h1>
 <button data-js-tag="detect-button-press">a button that should be pressable even with the hidden sidebar above it</button>
 <div data-js-tag="hidden-sidebar" class="hidden-sidebar">
   <!-- 新增：用于检测hover的透明元素 -->
   <div data-js-tag="hover-detector" class="hover-detector"></div>
   <button data-js-tag="show-sidebar-button" type="submit" class="hide show-sidebar-button">bring sidebar back</button>
 </div>
</body>
</html>

CSS #

body{
 padding: 25px;
 background-color: #32442e;
 padding: 0;
}
.title {
 color: #a2a323;
 margin: 25px;
}
button {
 color: #a2a323;
 background-color: #12141e;
 margin: 25px;
}
.hidden-sidebar{
 position: fixed;
 width: 100px;
 height: 100vh;
 left: 0;
 top: 0;
 pointer-events: none; /* 让容器本身允许点击穿透 */
}
/* 用于检测hover的元素：覆盖整个容器区域，只负责监听事件 */
.hover-detector{
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 pointer-events: auto; /* 允许这个元素检测鼠标事件 */
 background-color: transparent; /* 完全透明，不影响视觉 */
}
.hide{
 display: none;
}
.show-sidebar-button{
 position: fixed;
 pointer-events: auto; /* 确保按钮可以被点击 */
 z-index: 1; /* 保证按钮在检测元素上方 */
}

JavaScript #

// 获取元素
const hoverDetector = document.querySelector("[data-js-tag='hover-detector']");
const showSidebarButton = document.querySelector("[data-js-tag='show-sidebar-button']");

showSidebarButton.classList.add("hide");

// 移动按钮到鼠标位置的函数
const moveButton = (mousePosition = {x: 0, y: 0}) => {
 showSidebarButton.style.top = `${mousePosition.y - 15}px`; // 减去按钮一半高度，让按钮居中于鼠标
 showSidebarButton.style.left = "10px"; // 固定在侧边栏区域内
}

// 绑定事件到hover检测元素
hoverDetector.addEventListener("mouseover", () => {
 showSidebarButton.classList.remove("hide");
});

hoverDetector.addEventListener("mousemove", (event) => {
 moveButton({x: event.x, y: event.clientY}); // 用clientY获取相对于视口的y坐标更准确
});

hoverDetector.addEventListener("mouseleave", () => {
 showSidebarButton.classList.add("hide");
});

// 按钮点击事件：恢复侧边栏（这里可以加你自己的恢复逻辑）
showSidebarButton.addEventListener("click", () => {
 showSidebarButton.classList.add("hide");
 // 比如：document.querySelector(".hidden-sidebar").classList.remove("hidden-sidebar");
});

为什么这样可行？ #

• 隐藏侧边栏容器设置pointer-events: none，所以所有点击都会直接穿透到下方的按钮或其他元素；
• hover-detector元素只负责检测鼠标的进入、移动和离开，它的pointer-events: auto让它能正常监听这些事件，但因为它是透明的，完全不影响视觉；
• 恢复按钮单独设置pointer-events: auto，并且加了z-index:1，确保它在检测元素上方，能被正常点击；
• 用mousemove代替mouseenter来移动按钮，这样鼠标在侧边栏区域内移动时，按钮会跟着光标走，体验更流畅。

内容的提问来源于stack exchange，提问作者Trying to code