css - 如何让箭头仅在悬停时出现在轮播上

Question

对于我正在构建的 wordpress 主题，我添加了 Owl Carousel 。我能够让导航以我想要的方式出现。旋转木马侧面的箭头。

但现在我的问题是我希望箭头仅在您将鼠标悬停在旋转木马上时出现。 (一个例子是 http://www.whowhatwear.com - 正方形)

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

这是我的CSS

/* Navigation */
.owl-prev, .owl-next {
  position:absolute;
  top:50%;
  padding:5px;
  margin:0;
  z-index:100;
  font-size:3rem;
  cursor:pointer;
  color:#000000; 
}

.owl-prev {
  left:-10px;
  opacity: 0 !important;
}

.owl-next {
  right:-10px;
  opacity: 0 !important;
}

.owl-theme .owl-controls .owl-buttons div{
  color: #555;
  display: inline-block;
  zoom: 1;
  *display: inline;/*IE7 life-saver */
  font-size: 3rem;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  background: transparent;
  filter: Alpha(Opacity=100);/*IE7 fix*/
  opacity: 1;
  margin-top:-32px;
}

.owl-theme .owl-controls .owl-buttons div:hover {
  color:#000000;
  opacity: 1 !important;
}

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="https://via.placeholder.com/300x300/936/c69/?text=1" alt=""></div>
  <div><img src="https://via.placeholder.com/300x300/693/9c6/?text=2" alt=""></div>
  <div><img src="https://via.placeholder.com/300x300/369/69c/?text=3" alt=""></div>
  <div><img src="https://via.placeholder.com/300x300/c33/f66/?text=4" alt=""></div>
  <div><img src="https://via.placeholder.com/300x300/099/3cc/?text=5" alt=""></div>
  <div><img src="https://via.placeholder.com/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>