旋转木马标题悬停更改禁用旋转木马控件

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>

这是我的Cs:

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