在图像悬停上显示 text-div

Posted

技术标签:

【中文标题】在图像悬停上显示 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;

【讨论】:

以上是关于在图像悬停上显示 text-div的主要内容,如果未能解决你的问题,请参考以下文章

在任何背景上突出显示图像(悬停时)

如何在鼠标悬停 QML 上突出显示图像

仅在文本链接悬停 CSS 上显示图像

如何使用css在悬停时在图像上显示图像

使用 Nextjs 和 GSAP 悬停在标题上动态显示图像

悬停时在图像上显示标题[重复]