Question

对于我正在构建的wordpress主题，我添加了猫头鹰旋转木马。我能够看到我想要的导航。旋转木马一侧的箭头。

但现在我的问题是我希望只有当你将鼠标悬停在旋转木马上时才会出现箭头。（例如http://www.whowhatwear.com - 正方形）

当你将鼠标悬停在旋转木马上的一个位置时，我能够显示箭头，但我希望它们显示当你在旋转木马上滚动的任何地方。有没有人有解决方案？

这是我的css

        xlWorksheet.Range("nameofcell").Value = nameofemployee
        xlWorksheet.Range("nameofcell").Value = Title
        xlWorksheet.Range("nameofcell").Value = job
        xlWorksheet.Range("nameofcell").Value = site
        xlWorksheet.Range("nameofcell").Value = today()

Answer 1

尝试删除所有opacity属性并使用此CSS：

.owl-buttons {
  display: none;
}

.owl-carousel:hover .owl-buttons {
  display: block;
}

例如：http://codepen.io/glebkema/pen/GqbWYd

$(document).ready(function() {
 
  $("#owl-example").owlCarousel({
      itemsDesktop : [1499,4],
      itemsDesktopSmall : [1199,3],
      itemsTablet : [899,2],
      itemsMobile : [599,1],
      navigation : true,
      navigationText : ['<span class="fa-stack"><i class="fa fa-circle fa-stack-1x"></i><i class="fa fa-chevron-circle-left fa-stack-1x fa-inverse"></i></span>','<span class="fa-stack"><i class="fa fa-circle fa-stack-1x"></i><i class="fa fa-chevron-circle-right fa-stack-1x fa-inverse"></i></span>'],
  });
  
});

@import url('https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css');

.owl-buttons {
  display: none;
}
.owl-carousel:hover .owl-buttons {
  display: block;
}

.owl-item {
  text-align: center;
}

.owl-theme .owl-controls .owl-buttons div {
  background: transparent;
  color: #869791;
  font-size: 40px;
  line-height: 300px;
  margin: 0;
  padding: 0 60px;
  position: absolute;
  top: 0;
}
.owl-theme .owl-controls .owl-buttons .owl-prev {
  left: 0;
  padding-left: 20px;
}
.owl-theme .owl-controls .owl-buttons .owl-next {
  right: 0;
  padding-right: 20px;
}

<div id="owl-example" class="owl-carousel">
  <div><img src="//placehold.it/300x300/936/c69/?text=1" alt=""></div>
  <div><img src="//placehold.it/300x300/693/9c6/?text=2" alt=""></div>
  <div><img src="//placehold.it/300x300/369/69c/?text=3" alt=""></div>
  <div><img src="//placehold.it/300x300/c33/f66/?text=4" alt=""></div>
  <div><img src="//placehold.it/300x300/099/3cc/?text=5" alt=""></div>
  <div><img src="//placehold.it/300x300/f93/fc6/?text=6" alt=""></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>

Answer 2

如果你想要真正挑剔并在悬停时淡出它们，你可以使用hsla或rgba opacity来实现它。

<强> CSS

.carousel-buttons {
  background-color: hsla(0, 0%, 100%, 0); /*hide buttons by default*/
  color: hsla(0, 0%, 0%, 0); /*hide buttons by default*/
  transition: all 0.2s linear; /*adjust for your fade effect*/
}
.carousel:hover .carousel-buttons {
  background-color: hsla(0, 0%, 100%, 1); /*show buttons on carousel hover*/
  color: hsla(0, 0%, 0%, 1); /*show buttons on carousel hover*/
}
.carousel-buttons:hover {
  background-color: hsla(25, 50%, 75%, 1)!important; /*important needed for hover on individual button*/
  color: hsla(0, 0%, 20%, 1)!important; /*important needed for hover on individual button*/
}

请务必删除Gleb中提到的当前css中的不透明度。

<强>拨弄

https://jsfiddle.net/Hastig/92L3m327/1/

另一种选择，让jquery处理淡入淡出效果。

（这个例子看起来有点不稳定，我认为使用display: flex和display: block是默认设置的jquery默认情况下）

<强> CSS

.carousel-buttons {
  background-color: hsla(0, 0%, 100%, 1);
  color: hsla(0, 0%, 0%, 1);
}

.carousel-buttons:hover {
  background-color: hsla(25, 50%, 75%, 1);
  color: hsla(0, 0%, 0%, 1);
}

<强> HTML

<!-- start them out with display: none; set in inline styles -->
<div class="carousel-buttons carousel-button-left" style="display: none;">l</div>
<div class="carousel-buttons carousel-button-right" style="display: none;">r</div>

<强> jquery的

// jquery show will change them to display: block
$('.carousel')
  .mouseenter(function() {
    $('.carousel-buttons').show(200);
  })
  .mouseleave(function() {
    $('.carousel-buttons').hide(200);
  });
// jquery hide will change them to back to display: none

<强>拨弄

https://jsfiddle.net/Hastig/92L3m327/2/

如何在悬停时仅在旋转木马上显示箭头

2 个答案: