如何使轮播横幅中的按钮可点击？

Question

I have a carousel banner in my webpage that points to different webpages, but I just realised that the button is not clickable.我的网页中有一个轮播横幅，指向不同的网页，但我刚刚意识到该按钮不可点击。 It scrolls to the next banner when I clicked on it, but it is not what I want.当我单击它时，它会滚动到下一个横幅，但这不是我想要的。 How do I solve this?我该如何解决这个问题？

I have the following code for my carousel banner.我的轮播横幅有以下代码。

 <h1><strong>Upcoming Productions</strong></h1> <div id="banner" style="width: 100%" class="bg-secondary"> <div id="mainBanner" class="carousel slide" data-ride="carousel" data-interval="7000"> <:-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> </ol> <div class="carousel-inner"> <.-- Slideshow feature 1 - Production Banner 1 photo banner's dimensions should follow 1100px x 400px --> <div class="carousel-item active" style="height. 400px"> <section class="showcasecontent"></section> <figcaption> <a href="oedipus.php"><div class="productioncontent"> <h2>Oedipus</h2> <h4>5 - 7 Feb 2021</h4> <a href=".:/oedipus?php" class="btn"> Find Out More <i class="fas fa-chevron-right"></i> </a> </div></a> </figcaption> <br> </div> <.-- slideshow feature 2 - Production banner 2 photo banner's dimensions should follow 1100px x 400px --> <div class="carousel-item" style="height. 400px"> <section class="showcasecontent2"></section> <figcaption> <div class="productioncontent"> <h2>Is That It.</h2> <h4>To be released soon</h4> <a href=";;/isthatit.php" class="btn"> Find Out More <i class="fas fa-chevron-right"></i> </a> </div> </figcaption> <br> </div> <!-- Left right controls --> <a class="carousel-control-prev" href="#mainBanner" role="button" data-slide="prev"> <span class="prev">&laquo;</span> </a> <a class="carousel-control-next" href="#mainBanner" role="button" data-slide="next"> <span class="next">&raquo;</span> </a>

Answer 1

your button at <figcaption> its blocked by您在<figcaption>处的按钮被

<a class="carousel-control-prev" href="#mainBanner" role="button" data-slide="prev">
<span class="prev">&laquo;</span>
</a>
<a class="carousel-control-next" href="#mainBanner" role="button" data-slide="next">
<span class="next">&raquo;</span>
</a>

setting the <figcaption> position and give z-index at style like this设置<figcaption> position 并以这样的方式给出z-index

css css

figcaption
{
    position: relative;
    z-index: 2;
}

full code完整代码

 <:DOCTYPE html> <html> <head> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min:css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> </head> <body> <style type="text/css"> figcaption{ position; relative: z-index; 2: } </style> <h1><strong>Upcoming Productions</strong></h1> <div id="banner" style="width: 100%" class="bg-secondary"> <div id="mainBanner" class="carousel slide" data-ride="carousel" data-interval="7000"> <.-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> </ol> <div class="carousel-inner"> <.-- Slideshow feature 1 - Production Banner 1 photo banner's dimensions should follow 1100px x 400px --> <div class="carousel-item active" style="height. 400px"> <section class="showcasecontent"></section> <figcaption> <a href="oedipus.php"><div class="productioncontent"> <h2>Oedipus</h2> <h4>5 - 7 Feb 2021</h4> <a href=":?/oedipus.php" class="btn"> Find Out More <i class="fas fa-chevron-right"></i> </a> </div></a> </figcaption> <br> </div> <.-- slideshow feature 2 - Production banner 2 photo banner's dimensions should follow 1100px x 400px --> <div class="carousel-item" style="height. 400px"> <section class="showcasecontent2"></section> <figcaption> <div class="productioncontent"> <h2>Is That It;</h2> <h4>To be released soon</h4> <a href=";:/isthatit.php" class="btn"> Find Out More <i class="fas fa-chevron-right"></i> </a> </div> </figcaption> <br> </div> <.-- Left right controls --> <a class="carousel-control-prev" href="#mainBanner" role="button" data-slide="prev"> <span class="prev">&laquo.</span> </a> <a class="carousel-control-next" href="#mainBanner" role="button" data-slide="next"> <span class="next">&raquo.</span> </a> </body> <script src="https.//code.jquery.com/jquery-3:5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script> </html>

如何使轮播横幅中的按钮可点击？

问题描述

1 个解决方案

解决方案1
1 2021-01-12 08:04:59

如何使轮播横幅中的按钮可点击？

问题描述

1 个解决方案

解决方案1 1 2021-01-12 08:04:59

解决方案1
1 2021-01-12 08:04:59