Clever Geek Handbook

Navigation element remains selected in Bootstrap carousel

After clicking the right or left button in this carousel, the button remains darker even after the mouse is turned off. I am guessing that some kind of visited state is the cause, but looking at the CSS I can't see anything that comes up. Is there a way to prevent this effect?

I wrote a JSFiddle to demonstrate it and copied the HTML below.

<div class='container'>
  <div class='row'>
    <div class='carousel slide' data-interval='false' id='product-image-carousel'>
      <!-- Wrapper for slides -->
      <center class='carousel-inner'>
        <div class='active item'>
            <img alt='...' src='http://placehold.it/300x200'>
        </div>
        <div class='item'>
          <img alt='...' src='http://placehold.it/300x200'>
        </div>
      </center>
      <!-- Controls -->
      <a class='left carousel-control' data-slide='prev' href='#product-image-carousel' role='button'>
        <span class='glyphicon glyphicon-chevron-left'></span>
      </a>
      <a class='right carousel-control' data-slide='next' href='#product-image-carousel' role='button'>
        <span class='glyphicon glyphicon-chevron-right'></span>
      </a>
    </div>
    <!-- Carousel -->
  </div>
</div>
+3


source to share


4 answers


Quick workaround: Overwrite bootstrap css.

.carousel-control:hover, 
.carousel-control:focus {
  color: #fff;
  text-decoration: none;
  opacity: .9;
  filter: alpha(opacity=90);
}


Delete All: Focus Selector

0


source


You can use this workaround:

$(".carousel-control").focus(function(event){
    $(this).blur();
});


This works for me.

0


source


Just fix it with css, lower opacity to .carousel-control:hover, .carousel-control:focus

classess, apply below code fiddle

or yours page

, you can see the difference, thanks

 #product-image-carousel a {
   outline: none !important; /* this will remove the outline when we click the anchor tag */
 }
 .carousel-control:hover, .carousel-control:focus {
   opacity: 0.5; /* this will remove the darker color on focus and hover */
 }
0


source


jsfiddle Update

.carousel-control:focus {
    outline: none;
    opacity: 0.5;
}
.carousel-control:hover {
  opacity: 0.8;
}
0


source






More articles:


All Articles