Question

好吧所以我一直在寻找这个问题，发现了很多话题，但由于某种原因，我无法达到我想要的效果。

所以我有一个包含生成内容的滑块，请参阅下面的代码。

@foreach ($elements['instagram-highlights']['subs'] as $item)

<img class="instagram-home-items" src="{{ $item['instagram-items']['image'] }}">

<div class="text-content">
     {!! $item['instagram-items']['textfield'] !!}
</div>

@endforeach

类text-content设置为display：none。当img instagram-home-items悬停时，文本内容的内容应该放在图像的顶部。出于某种原因，这不起作用。我到目前为止所拥有的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;

}

.instagram-home-items:hover .text-content {
    display:block;
    opacity: 1;
}

这可能很简单，但我似乎无法做到正确。谢谢！

编辑：Tripleb的回答是为悬停工作，现在下一个问题是幻灯片。我正在使用Carousel2，但由于某种原因，当我将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

Tripleb提供的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;
}

有关该部分的任何建议吗？

Answer 1

你的css选择器是错的你选择“平行”文本不是图像的后代而是兄弟

@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

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


.instagram-home-items{
    display:block;
}

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

Answer 2

您的CSS代码假定.text-content是.instagram-home-items的子代。但在你的HTML中，他们实际上是兄弟姐妹。你应该做的是将它们包装在容器div中，如下所示：

<div class="item-wrapper">
   <img class="instagram-home-items" src="{{ $item['instagram-items']['image'] }}">

   <div class="text-content">
       {!! $item['instagram-items']['textfield'] !!}
   </div>
</div>

然后，将你的CSS更改为：

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

应该这样做。

Answer 3

.text-content不是.instagram-home-items

的子代

试试这个：

@foreach ($elements['instagram-highlights']['subs'] as $item)
<div class="instagram-home-items-wrapper">
    <img class="instagram-home-items" src="{{ $item['instagram-items']['image'] }}">

    <div class="text-content">
     {!! $item['instagram-items']['textfield'] !!}
    </div>
</div>
@endforeach

在你的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;

}

.instagram-home-items-wrapper:hover > .text-content {
    display:block;
    opacity: 1;
}

Answer 4

.instagram-home-items:hover .text-content该选择器正在查找类text-content的元素，该类是类instagram-home-items的元素的子元素。由于您无法在img标记中嵌套元素，因此我确定这不是您正在寻找的内容。

尝试使用兄弟选择器，如下所示：.instagram-home-items:hover + .text-content。

祝你好运！

在图像悬停上显示text-div

4 个答案: