carousel caption onhover changes disable carousel controls - html

Question

I want on hover to change the opacity of the carousel-caption (centered)! I tried to achieve this but when this event happens and i have the opacity i want, then the controls of the carousel don't work. any ideas?
<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>
Here Is My 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;
}