css - 导航元素在 Bootstrap Carousel 中保持突出显示

Question

在此旋转木马中单击右侧或左侧后，即使您将鼠标移开元素，按钮仍会变暗。我假设原因是某种访问状态，但查看 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>

Answer 1

快速解决方法:覆盖 Bootstrap 的 css。

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

完全删除 :focus 选择器