我想使用我的 flexslider 浏览我的页面。它不会让我点击滑块顶部的按钮。 滑块:
button,
h3 {
position: absolute;
z-index: 2;
}
.slides button {
bottom: 0;
margin: 20px;
padding: 15px;
border-radius: 5px;
cursor: pointer;
background-color: #1C934E;
}
.slides button:hover {
background-color: #146D3A;
}
.slides button a {
text-decoration: none;
color: #FBEDED;
}
.slides button a:hover {
color: #C5BBBB;
}
<header>
<div class="flexslider">
<ul class="slides">
<li>
<button type="button"><a href="#">Learn more about the Cheetah!</button>
<img src="img/cheetahslide.jpg" alt="Cheetah walk around savannah"></a>
<p class="flex-caption"></p>
</li>
<li>
<button type="button"><a href="#">Learn more about the Elephant!</a></button>
<img src="img/elephantslide.jpg" alt="elephant walking in field">
</li>
<li>
<button type="button"><a href="#">Learn more about the Komodo Dragon!</a></button>
<img src="img/komodoslide.jpg" alt="komodo dragon on a rock">
</li>
</ul>
</div>
</header>
我不确定这是否只是一个flexslider的问题。每当我使用检查器时,它甚至不显示按钮。
我尝试改变按钮的位置并尝试不同的位置。
检查 .flexslider 和 .slides 类是否具有相对位置。
.flexslider,
.slides {
position: relative;
}