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);
}

完全删除：焦点选择器

Answer 2

您可以使用此解决方法：

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

它对我有用。

Answer 3

只需使用css修复此问题，降低此.carousel-control:hover, .carousel-control:focus classess的不透明度，将以下代码应用于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 */
 }

Answer 4

jsfiddle Update

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

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

4 个答案: