如何解决如何修复 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 举报,一经查实,本站将立刻删除。