因此,我的页面上有一个cycle2 Carousel,效果很好。现在,我已经将轮播的内容放入DIV中,以便在悬停时可以在图像上显示内容。
当我删除该div(img_ct)时,轮播会正常工作,但我需要在该div上使用悬停效果。知道哪里出错了吗?下面使用的代码:
<div class="cycle-slideshow" style="width:auto;"
data-cycle-fx=carousel
data-cycle-timeout=4000
data-cycle-prev="> .cycle-prev"
data-cycle-next="> .cycle-next"
>
@foreach ($elements['instagram-highlights']['subs'] as $item)
<div class="img_ct">
<img class="instagram-home-items" src="{{ $item['instagram-items']['image'] }}">
<div class="text-content">
{!! $item['instagram-items']['textfield'] !!}
</div>
</div>
@endforeach
<div class= "cycle-prev slider-nav-insta"><i class="fa fa-angle-left"></i></div>
<div class= "cycle-next slider-nav-insta"><i class="fa fa-angle-right"></i></div>
和CSS(包括悬停等):
.text-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(29, 106, 154, 0.72);
color: #fff;
display:none;
opacity: 0;
-webkit-transition:opacity 0.2s;
}
.img_ct{
position:relative;
width:33%;
float:left;
}
.instagram-home-items{
display:block;
}
.img_ct:hover .text-content {
display:block;
opacity: 1;
}
编辑:Zgood提供的代码可以工作,但是现在CSS搞砸了。悬停应该只在实际悬停的项目上,但是它会出现在所有项目上。有什么想法吗?
最佳答案
我认为您需要的是API page上的slides
选项。
一个选择器字符串,用于标识幻灯片中的元素
应该变成幻灯片的容器。默认情况下,Cycle2查找所有
幻灯片容器的直接子元素的图像元素。
因此,在您的情况下,您需要将该slides
值设置为> .img_ct
。由于您使用data-
属性进行了声明,因此您的代码可能如下所示:
<div class="cycle-slideshow" style="width:auto;"
data-cycle-slides="> .img_ct"
data-cycle-fx="carousel"
data-cycle-timeout="4000"
data-cycle-prev="> .cycle-prev"
data-cycle-next="> .cycle-next"
>
更新资料
对于您更新的问题,可能与以下样式有关:
.img_ct:hover .text-content {
display:block;
opacity: 1;
}
Cycle2将在当前处于活动状态的幻灯片上放置一个活动类。它称为
.cycle-slide-active
。因此,我认为您应该将上述样式更新为仅针对活动幻灯片。像这样:.img_ct.cycle-slide-active:hover .text-content {
display:block;
opacity: 1;
}