【问题标题】:Bootstrap carousel caption on hover悬停时引导轮播标题
【发布时间】:2019-03-19 20:41:01
【问题描述】:

我正在使用引导轮播,我只需要在悬停时显示标题

我知道我需要用 CSS 做点什么

<div id="myCarousel" class="carousel slide">
            <div class="carousel-inner">
                <div class="item active">
                    <div class="row">                        
                        <div class="col-md-2">   
                            <a href="#" class="thumbnail"><img class="img-responsive" src="pic.jpg" alt="Thumb11"> </a>                               
                            <div class="carousel-caption">
                                    <h3 >Caption Text</h3>
                                    <p >This is some text<p>
                                </div>
                        </div>
                        <div class="col-md-2"><a href="#" class="thumbnail"><img class="img-responsive" src="pic.jpg" alt="Thumb12"></a>
                        </div>
                        <div class="col-md-2"><a href="#" class="thumbnail"><img class="img-responsive" src="pic.jpg" alt="Thumb13"></a>
                        </div>
                        <div class="col-md-2"><a href="#" class="thumbnail"><img class="img-responsive" src="pic.jpg" alt="Thumb14"></a>
                        </div>
                        <div class="col-md-2"><a href="#" class="thumbnail"><img class="img-responsive" src="pic.jpg" alt="Thumb21"></a>
                        </div>
                        <div class="col-md-2"><a href="#" class="thumbnail"><img class="img-responsive" src="pic.jpg" alt="Thumb22"></a>
                        </div>


                    </div>
                </div>

【问题讨论】:

    标签: twitter-bootstrap carousel caption


    【解决方案1】:
    $(document).ready(function(){
        $(".carousel-caption").hide();
        $("img[alt=thumb11").on("hover",function(){
            $(".carousel-caption").fadeIn();
        });
    });
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2017-04-24
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-04-20
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多