在图像上悬停显示文本-div

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

class 文本内容设置为显示：none。当 img instagram-home-items 悬停时，text-content 的内容应该放在图像的顶部。由于某种原因，这行不通。我目前得到的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 选择器是错误的你选择 "parallel" 文本不是图像的后代而是兄弟

@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

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

尝试像这样使用兄弟选择器：.instagram-home-items:hover + .text-content。

祝你好运！

Answer 4

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

在图像上悬停显示文本-div

On image hover display text-div over it

html

javascript

css

blade