css 图像不允许我单击按钮

我正在为一门课制作网页，我被要求制作三个div，它们可以隐藏，也可以在页面顶部用一组按钮显示。按钮本身工作正常，但是每当我点击第三个div时，第三个div就会如预期的那样显示出来，但之后我就再也不能点击任何按钮了。
应该发生的事情是，我可以点击任何按钮，使当前div消失，我点击的按钮的一个出现，但相反，一旦第三个出现，我不能点击按钮。我注意到，当我试图双击按钮，它选择了第三个div顶部的图像，所以我试图摆脱图像，这使得按钮再次工作。不过我必须保留图像，所以我不得不把它放回去，然后试着看看图像是否真的超级大，只是大部分都是空的，与按钮重叠，然而当我在上面加边框时，它显示图像的边缘是预期的大小，完全没有覆盖按钮，但不知何故，它仍然阻止我点击按钮。我尝试将z-index设置为-1和-10，但都不起作用，并将pointer-events设置为none，也不起作用。我尝试摆脱一些fiex位置属性，但这会导致绘制div或顶栏，在div的情况下，太高了，在这个条的情况下，太薄了，按钮在上面。我的定位目标是让div在顶部比条低一点，图片在里面居中，条比按钮的高度低一点，值得在按钮的上面和下面填充。我该如何解决这个问题？

function toggle() {
  var x = document.getElementById("myDIV");
  var y = document.getElementById("myDIV2");
  var z = document.getElementById("myDIV1");
  if (x.style.display === "flex") {
    x.style.display = "none";
    y.style.display = "none";
    z.style.display = "none";
  } else {
    x.style.display = "flex";
    y.style.display = "none";
    z.style.display = "none";
  }
}

function toggle2() {
  var x = document.getElementById("myDIV");
  var y = document.getElementById("myDIV2");
  var z = document.getElementById("myDIV1");
  if (x.style.display === "flex") {
    x.style.display = "none";
    y.style.display = "none";
    z.style.display = "none";
  } else {
    x.style.display = "none";
    y.style.display = "flex";
    z.style.display = "none";
  }
}

function toggle1() {
  var x = document.getElementById("myDIV");
  var y = document.getElementById("myDIV2");
  var z = document.getElementById("myDIV1");
  if (x.style.display === "flex") {
    x.style.display = "none";
    y.style.display = "none";
    z.style.display = "none";
  } else {
    x.style.display = "none";
    y.style.display = "none";
    z.style.display = "flex";
  }
}

.LandingBar {
  background: black;
  position: fixed;
  left: 0;
  height: 13%;
  width: 100%;
  margin-top: 2.5%;
  Opacity: 60%;
  top: 20px;
}

.btn {
  background: none;
  opacity: 1;
  border-radius: 10px;
  border: 2px solid white;
  cursor: pointer;
  color: white;
  font-family: Helvetica;
  font-size: 1em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 5px 10px 5px 10px;
}

.alignV {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  align-items: center;
  justify-content: center;
}

.btn-space {
  background: none;
  opacity: 0;
  width: 50px;
}

.btn:hover,
.btn:focus {
  background-color: yellow;
  color: black;
}

#myDIV {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
  align-items: center;
  justify-content: center;
  padding: 1%;
  /*background-color: lightblue;*/
  flex-direction: row;
  font-family: Helvetica;
  display: none;
}

.myDIVbox {
  position: relative;
  left: 0;
  /*border: 2px solid red;*/
  width: 60%;
  height: 50%;
  padding-bottom: 30px;
  padding-top: 30px;
  display: inline-flex;
  flex-direction: row;
  font-family: Helvetica;
  color: white;
  background: black;
  opacity: 60%;
  padding-left: 30px;
  padding-right: 30px;
  flex-direction: column;
  top: 80px;
}

.logo {
  position: relative;
  left: 310px;
  /*border: 5px solid red;*/
}

.btn1 {
  background: none;
  opacity: 1;
  border-radius: 10px;
  border: 2px solid white;
  cursor: pointer;
  color: white;
  font-family: Helvetica;
  font-size: 1em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 5px 10px 5px 10px;
  width: 25%;
  position: relative;
  left: 290px;
}

#myDIV1 {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
  align-items: center;
  justify-content: center;
  padding: 1%;
  /*background-color: lightblue;*/
  flex-direction: row;
  font-family: Helvetica;
  display: none;
}

.myDIVbox1 {
  position: relative;
  left: 0;
  /*border: 2px solid red;*/
  width: 60%;
  height: 50%;
  padding-bottom: 30px;
  padding-top: 30px;
  display: inline-flex;
  flex-direction: row;
  font-family: Helvetica;
  color: white;
  background: black;
  opacity: 60%;
  padding-left: 30px;
  padding-right: 30px;
  flex-direction: column;
  top: 80px;
}

#myDIV2 {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
  align-items: center;
  justify-content: center;
  padding: 1%;
  /*background-color: lightblue;*/
  flex-direction: row;
  font-family: Helvetica;
  display: none;
}

.myDIVbox2 {
  position: relative;
  left: 0;
  /*border: 2px solid red;*/
  width: 60%;
  height: 50%;
  padding-bottom: 30px;
  padding-top: 30px;
  display: inline-flex;
  flex-direction: row;
  font-family: Helvetica;
  color: white;
  background: black;
  opacity: 60%;
  padding-left: 30px;
  padding-right: 30px;
  flex-direction: column;
  top: 80px;
}

<div class="LandingBar">

  <button class="btn alignV" onclick="toggle1()">button 1</button>
  <!--the buttons-->
  <button class="btn-space alignV"></button>
  <button class="btn alignV" onclick="toggle2()">button 2</button>
  <button class="btn-space alignV"></button>
  <button class="btn alignV" onclick="toggle()">the beatles</button>

</div>
<div id="myDIV">
  <div class="myDIVbox">
    <img class="logo" src="https://via.placeholder.com/300" height="20%" width="20%">
    <br> Lorem Ipsum<br>
    <br> Lorem Ipsum<br>
    <br> lorem ipsum<br>
    <button class="btn1">Lorem Ipsum</button>
  </div>

</div>
<div id="myDIV2">
  <div class="myDIVbox2">
    content2<br> content
    <br> content
    <br>
    <br>
    <button class="btn1">Lorem Ipsum</button>
  </div>
</div>
<div id="myDIV1">
  <div class="myDIVbox1">
    content1<br> content
    <br> content
    <br>
    <br>
    <button class="btn1">Lorem Ipsum</button>
  </div>
</div>

css 图像不允许我单击按钮

1条答案

相关问题

热门标签

最新问答