导航元素在 Bootstrap Carousel 中仍然突出显示答案

【问题标题】：Navigation element remains highlighted in Bootstrap Carousel导航元素在 Bootstrap Carousel 中仍然突出显示
【发布时间】：2015-07-14 13:30:33
【问题描述】：

在此轮播中单击右侧或左侧后，即使您将鼠标从元素上移开，按钮仍会变暗。我认为原因是某种已访问状态，但是查看 CSS，我看不到任何相关内容。有什么办法可以防止这种影响吗？

我已经written a JSFiddle to demonstrate it，并复制了下面的 HTML。

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

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

jsfiddle Update

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

【讨论】：

【解决方案2】：

只需使用 css 修复此问题，降低此 .carousel-control:hover, .carousel-control:focus 类的不透明度，应用以下代码您的 fiddle 或您的 page 您可以看到不同之处，谢谢

 #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 */
 }

【讨论】：

【解决方案3】：

您可以使用此解决方法：

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

它对我有用。

【讨论】：

【解决方案4】：

快速解决方法：覆盖引导程序的 css。

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

完全移除 :focus 选择器

【讨论】：