代码之家 › 专栏 › 技术社区 › user2252219

在悬停猫头鹰旋转木马上如何显示导航?

owl-carousel css jquery

user2252219 · 技术社区 · 9 年前

我试图让导航只在旋转木马悬停时显示,但不确定如何接近它。我应该使用可见性切换吗?

编辑

.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
}

1 回复 | 直到 9 年前

zero point 9 年前

您只需要更改 owl-prev 和 owl-next 在CSS代码中设置为0,如下所示:

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

然后,您可以定义 hover 对的操作 owl-carousel 以如下方式显示/隐藏:

.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

推荐文章

Sam · 使用Ajax动态插入owl转盘的图像

6 年前

priMo-ex3m · Owl carousel未根据设置的选项调整大小

7 年前

Husna · 猫头鹰旋转木马导航点平稳更改活动类

7 年前

Learning · 无法从传送带中删除半传送背景

7 年前

tomasr · Owl转盘动态参数

7 年前

serdar · Updatepanel内的猫头鹰旋转木马在回发后消失

7 年前

Yajuvendra pratap singh · Owl旋转木马滚动问题

7 年前

harri · Owl旋转木马启用窗口滚动

7 年前

Kishan Punjani · 在幻灯片放映开始之前,所有幻灯片的图像都显示在一个堆栈中,在几秒钟内打破了网站的布局

7 年前

HenThai · Owl旋转木马与我的javascript冲突

7 年前