为什么我的演示文稿中的按钮不可点击？

Question

我正在制作一个全屏演示文稿的网站。我遵循了一个教程，但我决定去为每张幻灯片添加按钮，但出于某种原因——只有第三张幻灯片的按钮是可点击的。我最初使用了 <button> 标签，但它不起作用，所以我改用了 <a>，但它也不起作用。我试过将 z-index 设置为 999999999 但没有成功。

#slider {
  position: relative;
  overflow: hidden;
  height: 100vh;
  width: 100%;
  box-shadow: var(--shadow);
}

#slider .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

#slider .slide.current {
  opacity: 1;
}

#slider .slide .content {
  position: absolute;
  bottom: 70px;
  left: -700px;
  opacity: 0;
  width: 600px;
  padding: 35px;
}

#slider .slide .content h1 {
  margin-bottom: 10px;
}

#slider .slide.current .content {
  opacity: 1;
  transform: translateX(780px);
  transition: all 0.7s ease-in-out 0.3s;
}

#slider .content a {
  position: absolute;
  z-index: 9999999999;
  text-decoration: none;
  color: white;
  padding: 13px 15px;
  border: 2px solid #fff;
  margin-top: 10px;
}

#slider .content a:hover {
  background: #fff;
  color: #333;
}

button#next {
  position: absolute;
  top: 50%;
  right: 15px;
}

button#prev {
  position: absolute;
  top: 50%;
  left: 15px;
}

button {
  border: 2px solid #fff;
  background-color: transparent;
  color: #fff;
  padding: 13px 15px;
  transition: 0.3s;
  z-index: 4;
}

button:hover {
  background-color: #fff;
  color: #333;
  transition: 0.3s;
}


/* Background Images */

.slide:first-child {
  background: url(../images/slide1.png) no-repeat center center/cover;
}

.slide:nth-child(2) {
  background: url(../images/slide2.png) no-repeat center center/cover;
}

.slide:nth-child(3) {
  background: url(../images/slide3.png) no-repeat center center/cover;
}

@media(max-width: 500px) {
  #slider .slide .content {
    bottom: -300px;
    left: 0;
    width: 100%;
  }
  #slider .slide.current .content {
    transform: translateY(-300px);
  }
}

<header>

  <body>
    <!-- Wrapper -->
    <div id="wrapper">

      <!-- Header -->
      <section id="header">
        <a href="http://iu.edu/"><img src="images/logo.png" alt="Ocean World" class="hvr-float"></a>
        <ul>
          <li class="item hvr-float" id="description"><a href="#">Description</a></li>
          <li class="item hvr-float" id="visualization"><a href="#">Visualization</a></li>
          <li class="item hvr-float" id="About"><a href="#">About Us</a></li>
        </ul>
      </section>

      <!-- Slideshow -->
      <section id="slider">
        <div class="slide current">
          <div class="content">
            <h1>Climate Change</h1>
            <p>As climate change becomes a bigger and bigger issue, many people still don't know what it is.</p>
            <br />
            <a href="#">Learn more</a>
          </div>
        </div>
        <div class="slide">
          <div class="content">
            <h1>See the Results</h1>
            <p>You can find data here about the results climate change has had on our globe and it's water level.
            </p>
            <br />
            <a href="#">Learn more</a>
          </div>
        </div>
        <div class="slide">
          <div class="content">
            <h1>About Us</h1>
            <p>We're a small work group from the IUPUI School of Informatics. Here, you can learn a little more about us.</p>
            <br />
            <a href="#">Learn more</a>
          </div>
        </div>
      </section>
      <button id="prev"><i class="fas fa-arrow-left"></i></button>
      <button id="next"><i class="fas fa-arrow-right"></i></button>

Answer 1

您遇到问题的原因是您为所有幻灯片设置了绝对定位。因此，尽管由于在非活动幻灯片上将不透明度设置为 0，您无法同时看到所有幻灯片，但它们都堆叠在彼此的顶部，第三张幻灯片是最上面的。因此，当您尝试按下前两张幻灯片中的任意一张上的按钮时，您实际上按下的是第三张幻灯片。

要解决此问题，请删除 #slider .slide 上的 position: absolute; 规则而是为 #slider 设置 position: absolute; .slide.current.

为什么我的演示文稿中的按钮不可点击？

Why are the buttons in my presentation not clickable?

html

javascript

css

hyperlink

presentation