Question

我的网页中有一个轮播横幅，指向不同的网页，但我刚刚意识到该按钮不可点击。当我点击它时它会滚动到下一个横幅，但这不是我想要的。我该如何解决这个问题？

我的轮播横幅有以下代码。

<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

您在 <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>

设置 <figcaption> 位置并赋予 z-index 这样的样式

css

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

完整代码

<!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 个答案: