Html Cycle2转盘在运行时不工作'；他在一个房间里

因此，我的页面中有一个cycle2旋转木马，它工作得非常好。现在我把旋转木马的内容放在一个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>

---

EDIT:Zgood提供的代码可以工作，但现在CSS有点出错。悬停应该只在实际被悬停的项目上，但它会在所有项目上进行。有什么想法吗？

我想你需要的是屏幕上的

幻灯片

选项

一个选择器字符串，用于标识幻灯片中的元素 应该成为幻灯片的容器。默认情况下，Cycle2查找所有 作为幻灯片放映容器的直接子级的图像元素

因此，在您的情况下，您需要将

幻灯片

的值设置为

.img\u ct

。由于您使用

数据-

属性声明它，因此您的代码可能如下所示：

<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"
 >

Cycle2将把当前活动的类放在幻灯片上。它被称为

。循环滑动激活

。因此，我认为您应该更新上述样式，只针对活动幻灯片。像这样：

.img_ct.cycle-slide-active:hover .text-content {
        display:block;
        opacity: 1;
    }

---

谢谢你的回答！它确实可以工作，但是现在CSS有点搞砸了。将鼠标悬停在旋转木马中的所有图像上。有什么想法吗？@StefanNeuenschwander请检查一下我的更新是否对你有帮助。它被修复了，我的css被插件中的css覆盖了，应该知道。。css问题的解决方案是添加！对img_ct部门很重要。谢谢你的帮助！

.img_ct:hover .text-content {
    display:block;
    opacity: 1;
}

.img_ct.cycle-slide-active:hover .text-content {
        display:block;
        opacity: 1;
    }