carousel标题悬停更改禁用carousel控件

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;
  }