CSS Bootstrap Carousel: Show controls when hover over control section, not when hovering over entire carousel
<p>My carousel has full page images, and when the mouse is anywhere on the page the controllers show up. I'd like them to only show up when hovering over the area that the controller is in.</p>

<pre><code>.carousel .carousel-control {
    visibility: hidden;
}
.carousel:hover .carousel-control { 
    visibility: hidden; 
}

.carousel-control.left, .carousel-control.right {
    background-image: none;
}

.carousel-control:hover {
    visibility: visible;
}
</code></pre>

<p>The third tag is to remove the gradient, any help is appreciated</p>