为什么我的演示文稿中的按钮不可点击？
我正在一个全屏演示的网站上工作。我遵循了一个教程，但我决定去为每张幻灯片添加按钮，但出于某种原因 - 只有第三张幻灯片的按钮是可点击的。我最初使用了一个<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布斯
您出现问题的原因是您为所有幻灯片设置了绝对定位。因此，即使由于不活动幻灯片上的不透明度设置为 0，您也无法同时看到所有幻灯片，但它们都堆叠在一起，第三张幻灯片是最顶部的。因此，当您尝试按下前两张幻灯片中的任何一张上的按钮时，您实际上是在按下第三张幻灯片。要解决此问题，请去掉position: absolute;#slider .slide 上的规则，改为设置position: absolute;#slider .slide.current。
随时随地看视频慕课网APP
相关分类
JavaScript