悬停 OwlCarousel 如何显示导航？

Question

我试图让导航仅在旋转木马悬停时显示，但不确定如何处理。我应该使用可见性切换吗？

编辑

.owl-theme .owl-controls .owl-nav [class*=owl-] {
  color: #fff;
  font-size: 14px;
  font-family: 'KeplerStd-Regular';
  display: block;
  cursor: e-resize;
}

.owl-theme .owl-controls .owl-nav [class*=owl-]:hover {
  background-color: #1f1f1f;
  transition: 0.5s all;
  cursor: e-resize
}

Answer 1

您只需要在 CSS 代码中将 owl-prev 和 owl-next 的不透明度更改为 0，如下所示：

.owl-prev, .owl-next {opacity: 0 !important;}

然后，您可以定义 hover 对 owl-carousel 到 show/hide 的操作，如下所示：

.owl-carousel:hover .owl-controls .owl-buttons .owl-prev {opacity: 1 !important;}
.owl-carousel:hover .owl-controls .owl-buttons .owl-next {opacity: 1 !important;}

查看工作示例 HERE

悬停 OwlCarousel 如何显示导航？

On hover OwlCarousel how to show the nav?

css

jquery

owl-carousel