HTML按钮无响应求助：几何渲染器工具栏按钮点击失效

你的工具栏按钮点击无反应、鼠标悬停不变指针，核心原因是**#options-container元素绝对定位占满了整个视口，并且它的DOM位置在#toolbar之后，导致它完全覆盖在工具栏上方，拦截了所有鼠标事件**。哪怕按钮本身设置了cursor: pointer，但因为上层有个透明容器挡住，根本触发不了事件。

另外还有个小问题：#toolbar的border-bottom写法错误，用逗号分隔属性值是无效的，应该用空格。

修复步骤 #

1. 调整#options-container的层级逻辑 #

给#options-container默认设置较低的z-index，只有当弹窗#options显示时再提升层级，这样平时不会遮挡工具栏：

修改CSS：

#options-container {
  position: absolute;
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  z-index: -1; /* 默认在底层，不遮挡上层元素 */
  background-color: rgba(0,0,0,0.2); /* 可选：添加半透明背景增强弹窗氛围感 */
}

然后在JS中控制弹窗显示/隐藏时同步调整层级：

const optionsContainer = document.getElementById('options-container');

// 关闭弹窗时还原层级
owc.addEventListener('click', () => {
  options.style.display = 'none';
  optionsContainer.style.zIndex = -1;
});

// 封装弹窗显示逻辑，统一设置层级
const showOptions = (title) => {
  options.style.display = 'block';
  own.innerHTML = title;
  optionsContainer.style.zIndex = 10; // 弹窗显示时提升层级
}

2. 修复#toolbar的边框错误 #

把border-bottom: 1px, solid, #000000;改成正确的写法：

#toolbar {
  height: 5%;
  width: 100%;
  background-color: #999999;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #000000; /* 用空格分隔属性值 */
}

3. 给关闭按钮添加指针样式 #

#options-close是<p>标签，不是按钮，需要单独设置鼠标指针：

#options-close {
  color: #cc0000;
  margin-inline: 5%;
  margin-left: auto;
  font-size: 200%;
  cursor: pointer; /* 添加鼠标悬停指针 */
}

完整修复后的代码示例 #

HTML（无需改动） #

<div id="toolbar">
  <button id="file-button">File</button>
  <button id="settings-button">Settings</button>
  <button id="help-button">Help</button>
  <button id="command-button">Command Bloc</button>
  <button id="saved-commands-button">Saved Commands</button>
  <button id="hierarchy-button">Hierarchy</button>
</div>
<div id="render"></div>
<div id="options-container">
  <div id="options">
    <div id="options-upper-bar">
      <p id="options-name"></p>
      <p id="options-close">×</p>
    </div>
    <div id="file"></div>
    <div id="settings"></div>
    <div id="help"></div>
    <div id="command-bloc"></div>
    <div id="saved-commands"></div>
    <div id="hierarchy"></div>
  </div>
</div>

CSS #

* {
  color: #000000;
  font-size: 100%;
  user-select: none;
}

p {
  margin: 0;
}

button {
  cursor: pointer;
}

html,
body {
  background-color: #ffffff;
  height: 100%;
  width: 100%;
  margin: 0;
}

#toolbar {
  height: 5%;
  width: 100%;
  background-color: #999999;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #000000;
}

#toolbar button {
  cursor: pointer;
}

#file-button,
#settings-button,
#help-button,
#command-button,
#saved-commands-button,
#hierarchy-button {
  border: none;
  background: #999999;
  margin-inline: 1%;
}

#command-button {
  margin-left: auto;
}

#options-container {
  position: absolute;
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  z-index: -1;
  background-color: rgba(0,0,0,0.2);
}

#options {
  position: absolute;
  top: 12%;
  left: 12%;
  transform: translate(0%, 0%);
  height: 75%;
  width: 75%;
  border-radius: 20px;
  background-color: #888888;
  overflow: hidden;
  display: none;
}

#render {
  height: 95%;
  width: 100%;
}

#options-upper-bar {
  background-color: #333333;
  height: 5%;
  display: flex;
  align-items: center;
}

#options-name {
  color: #ffffff;
  margin-inline: 5%;
}

#options-close {
  color: #cc0000;
  margin-inline: 5%;
  margin-left: auto;
  font-size: 200%;
  cursor: pointer;
}

JS #

const own = document.getElementById('options-name');
const options = document.getElementById('options');
const optionsContainer = document.getElementById('options-container');
const owc = document.getElementById('options-close');

owc.addEventListener('click', () => {
  options.style.display = 'none';
  optionsContainer.style.zIndex = -1;
});

const showOptions = (title) => {
  options.style.display = 'block';
  own.innerHTML = title;
  optionsContainer.style.zIndex = 10;
}

const fileb = document.getElementById('file-button');
fileb.addEventListener('click', () => showOptions('File'));

const settingsb = document.getElementById('settings-button');
settingsb.addEventListener('click', () => showOptions('Settings'));

const helpb = document.getElementById('help-button');
helpb.addEventListener('click', () => showOptions('Help'));

const commandBlocb = document.getElementById('command-button');
commandBlocb.addEventListener('click', () => showOptions('Command Bloc'));

const savedCommandsb = document.getElementById('saved-commands-button');
savedCommandsb.addEventListener('click', () => showOptions('Saved Commands'));

const hierarchyb = document.getElementById('hierarchy-button');
hierarchyb.addEventListener('click', () => showOptions('Hierarchy'));

内容的提问来源于stack exchange，提问作者Tomáš Jelínek