如何修复 css 网格布局中对所有状态悬停、焦点等无响应的按钮？

问题描述

我正在制作一个页面，我正在使用 CSS Grid 来布置页面。我创建了一个包含多个按钮的网格。其中两个按钮可以使用，但第三个按钮卡住并且不会响应任何状态更改。我只能通过样式面板在 Chrome DevTools 中将按钮的状态更改为类似悬停的状态。该网格位于另一个网格的内部，该网格创建了欢迎框的格式。但是，我没有包含按钮所包裹的网格的代码，因为我认为它不相关，因为其中两个按钮可以工作。这是我的页面的图像，其中包含 Chrome DevTools 中可用的网格覆盖。

前两个按钮起作用，自定义和简单的设置按钮，但是继续但是给我带来麻烦的那个。 这是我的麻烦按钮代码： HTML：

<span class="continue-container"><button class="continue" onclick="continueSetup()" id="slide1Continue">Continue</button></span>

CSS：

.continue { background-color: white; border: 2px solid black; border-radius: 5px; opacity: 0; transition: 0.7s; } .continue-container { grid-column: 3 / 6; grid-row: 4 / 4; text-align: center; }

我相信有一件事可能会导致问题。如您所见，当页面加载时，按钮的不透明度最初设置为 0。一旦用户选择了上面的按钮，下面的函数就会在 JavaScript 中运行： document.getElementById('slide1Continue').style.opacity = 1; 也许这只是 Chrome 小故障，我还没有在任何其他浏览器中测试过它。我在运行 MacOS 11.1 的 Intel Mac 上运行 Chrome 88.0.4324.96。最后，这是我的问题的代码再现：

.continue-container {
  grid-column: 3 / 6;
  grid-row: 4 / 4;
  text-align: center;
}

.continue {
  background-color: white;
  border: 2px solid black;
  border-radius: 5px;
  opacity: 0;
  transition: 0.7s;
}

.setup-wrapper {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 1fr auto 1fr;
  height: 100vh;
  width: 100vw;
  position: absolute;
  z-index: 500;
}

.setup-Box {
  background-color: white;
  border-radius: 10px;
  max-height: 45vh;
  max-width: 50vw;
  padding: 3%;
  grid-row: 2 / 2;
  grid-column: 2 / 2;
}

.title-group {
  font-size: 125%;
}

.prompt-title,.option-caption-header {
  font-weight: 600;
}

.prompt-title {
  font-size: 200%;
}

#custom-setup,#simple-setup {
  height: 100%;
  background-color: white;
  border-radius: 15px;
  border: 2px solid #191923;
  padding: 10px;
}

#simple-setup {
  grid-column: 2 / 4;
  grid-row: 2 / 1;
}

#custom-setup {
  grid-column: 5 / 7;
  grid-row: 2 / 1;
}

#first-content {
  display: grid;
  grid-template-rows: 93% 2% 5%;
  grid-template-columns: 3.5% 42.5% 2.5% 3.5% 2.5% 42.5% 3.5%;
}

#slide1 {
  display: grid;
  grid-template-rows: 10% 7% 1% 82%;
  grid-template-columns: 100%;
}

.prompt-title {
  grid-row: 1 / 1;
  grid-column: 1 / 1;
}

.prompt-subtitle {
  grid-row: 2 / 2;
  grid-column: 2 / 2;
}

.content {
  grid-row: 4 / 4;
}

<div class="setup-wrapper">
  <div class="setup-Box">
    <div id="slide1">
      <div class="title-group">
        <div class="prompt-title"> Welcome</div>
        <div class="prompt-subtitle">Let's get set up.</div>
      </div>
      <div class="content" id="first-content">
        <button id="simple-setup" class="start-choice" autofocus onclick="choice='SimpleSetup';choiceUpdated();">
                    <img src="https://via.placeholder.com/380x250" style="width: 100%;">
                    <div class="option-caption">
                        <div class="option-caption-header">Simple Set Up</div>
                        <div class="option-caption-recommended">Recommended for most users</div>
                        <div class="option-caption-content">[Placeholder]</div>
                    </div>
                    </button>
        <button id="custom-setup" class="start-choice" onclick="choice='CustomSetup';choiceUpdated();">
                        <img dragable="false" src="https://via.placeholder.com/380x250" style="max-width: 100%;">
                        <div class="option-caption">
                            <div class="option-caption-header">Custom Set Up</div>
                            <div class="option-caption-content">[Placeholder]</div>
                        </div>
                    </button>
        <span class="continue-container"><button class="continue" onclick="continueSetup()" id="slide1Continue">Continue</button></span>
      </div>

希望有人能解决这个问题！提前致谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）