在图像悬停上显示 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的主要内容,如果未能解决你的问题,请参考以下文章