在图像悬停上显示 text-div

Posted 2023-03-14

【中文标题】在图像悬停上显示 text-div

【英文标题】：On image hover display text-div over it

【发布时间】：2016-02-23 03:45:27

【问题描述】：

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

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

@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;

对这部分有什么建议吗？

【问题讨论】：

请提供带有 html / CSS 的 jsfiddle

真的有必要提供一个小提琴，因为整个代码都在那里吗？

请回滚第二个问题的编辑并为其创建一个新问题。同时选择原始问题的最佳答案。

【参考方案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;

【讨论】：

这确实可以正常工作，但是由于某种原因，滑块现在已经停止工作。悬停是完美的。我将使用您的代码和提供幻灯片的代码编辑主要问题

【参考方案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;

应该可以的。

【参考方案3】：

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

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

祝你好运！

【参考方案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;