我正在一个全屏演示的网站上工作。我遵循了一个教程，但我决定去为每张幻灯片添加按钮，但出于某种原因 - 只有第三张幻灯片的按钮是可点击的。我最初使用了一个<button>标签，但它不起作用，所以我使用了一个标签，<a>它也不起作用。我尝试将 z-index 设置为 999999999，但没有成功。<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>
1 回答
HUX布斯
TA贡献1876条经验 获得超6个赞
您出现问题的原因是您为所有幻灯片设置了绝对定位。因此，即使由于不活动幻灯片上的不透明度设置为 0，您也无法同时看到所有幻灯片，但它们都堆叠在一起，第三张幻灯片是最顶部的。因此，当您尝试按下前两张幻灯片中的任何一张上的按钮时，您实际上是在按下第三张幻灯片。
要解决此问题，请去掉position: absolute;#slider .slide 上的规则，改为设置position: absolute;#slider .slide.current。
添加回答
举报
0/150
提交
取消