Question

我想悬停以改变旋转木马标题的不透明度（居中）！我试图实现这一点，但是当这个事件发生并且我有我想要的不透明度时，旋转木马的控制不起作用。任何想法？

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
         <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
         <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">

         <div class="item active">
             <img src="media1/1.png">

             <div class='carousel-caption'>
                 <h3><span class='glyphicon glyphicon-asterisk' style='font-size: 50px;'></span><br>GET ... - DEVELOP ... - ENTER ...</h3>
             </div>

        </div>

        <div class="item">
            <img src="media1/3.png">

            <div class="carousel-caption">
                <h3>FLUENCY IN AVAILABLE TOOLS AND LANGUAGES CAN BE BETTER OBTAINED THROUGH COLLABORATIVE, INTENSE, HANDS-ON LEARNING</h3>
            </div>

        </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" id='carousL'></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" id='carousR'></span>
    </a>

</div>

这是我的Css：

.carousel-caption {
    position:absolute;
    width: 100%;
    top: 300px;
    bottom: auto;
    text-align: center;
    margin-left: -332px;
    padding-left: 0;
}

.carousel-caption:hover{
    width: 100%;
    top: 300px;
    bottom: auto;
    text-align: center;
    margin-left: -332px;
    padding-left: 0;
    background: grey;
    opacity:0.1;
}

Answer 1

.carousel-caption {
  display: none;
  }

#carousel-example-generic:hover .carousel-caption {
  display: block 
  width: 100%;
  top: 300px;
  bottom: auto;
  text-align: center;
  margin-left: -332px;
  padding-left: 0;
  background: grey;
  opacity:0.1;
  }

carousel caption onhover更改禁用轮播控件

1 个答案: