如何让隐藏侧边栏检测鼠标悬停同时允许下方元素响应点击？

要实现「点击穿透隐藏侧边栏+检测鼠标悬停显示恢复按钮」的效果，核心是靠坐标判断+指针事件控制，具体修改如下：

核心思路 #

给隐藏侧边栏设置pointer-events: none让点击穿透到下方元素，同时通过监听全局鼠标移动事件，判断光标是否进入侧边栏的区域范围，以此来控制恢复按钮的显示/隐藏和位置。恢复按钮单独设置pointer-events: auto，保证它能正常被点击。

修改后的完整代码 #

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">
        <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;
}
button {
    color: #a2a323;
    background-color: #12141e;
}

.hidden-sidebar{
  position: fixed;
  background-color: #03030313; /* 可改为transparent实现完全透明 */
  width: 100px;
  height: 100vh;
  left: 0;
  top: 0;
  pointer-events: none; /* 让点击穿透到下方元素 */
}

.hide{
  display: none;
}

.show-sidebar-button{
  position: fixed;
  pointer-events: auto; /* 按钮不受父元素pointer-events限制，可正常点击 */
}

JS（重写鼠标检测逻辑） #

const hiddenSidebarDiv = document.querySelector("[data-js-tag='hidden-sidebar']");
const showSidebarButton = hiddenSidebarDiv.querySelector("[data-js-tag='show-sidebar-button']");
showSidebarButton.classList.add("hide");

// 获取侧边栏的实时位置与尺寸
function getSidebarBounds() {
  return hiddenSidebarDiv.getBoundingClientRect();
}

// 判断鼠标是否处于侧边栏区域内
function isMouseInSidebar(x, y) {
  const bounds = getSidebarBounds();
  return x >= bounds.left && x <= bounds.right && y >= bounds.top && y <= bounds.bottom;
}

// 移动按钮到鼠标当前位置
function moveButton(mousePosition) {
  showSidebarButton.style.top = `${mousePosition.y}px`;
  showSidebarButton.style.left = `${mousePosition.x}px`;
}

// 全局监听鼠标移动，控制按钮显示/隐藏
document.addEventListener("mousemove", (event) => {
  const mouseX = event.clientX;
  const mouseY = event.clientY;
  
  if (isMouseInSidebar(mouseX, mouseY)) {
    showSidebarButton.classList.remove("hide");
    moveButton({x: mouseX, y: mouseY});
  } else {
    showSidebarButton.classList.add("hide");
  }
});

// 恢复按钮点击逻辑（可自行添加显示侧边栏的代码）
showSidebarButton.addEventListener("click", () => {
  console.log("触发恢复侧边栏操作");
});

效果说明 #

• 隐藏侧边栏不会拦截点击，下方的按钮可以正常触发点击事件；
• 鼠标移入侧边栏区域时，恢复按钮会自动显示并跟随鼠标位置；
• 鼠标移出侧边栏区域后，按钮自动隐藏；
• 恢复按钮可正常点击，不受父元素的穿透设置影响。

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