在幻灯片中悬停时在图像上方显示文本答案

【问题标题】：Display text above image on hover, in a slideshow在幻灯片中悬停时在图像上方显示文本
【发布时间】：2016-12-23 03:45:27
【问题描述】：

正如标题所述，我有一个幻灯片放映，如果我悬停其中一张图片，我希望显示“SOLD OUT”文字。到目前为止，我发现的解决方案表明我应该使用环绕图像，但是每当我使用 <div> 标签在幻灯片中环绕图像时，滑块就会停止工作。将图像悬停后，我需要产生 2 种效果：制作一个低不透明度的覆盖白色背景，以及说明“SOLD OUT”的纯文本。我正在使用 CSS 中的“内容”功能，但无法启动它。

.slide-container {
    overflow: auto;
    white-space: nowrap;
    position: relative;
}
#id1:hover{
    background: white;
    opacity: .3;
    text-align: center;
    color: black;
    font-size: 30px;
    z-index: 10000;  
    font-weight: bolder;
    content: "SOLD OUT";
}

              <div class="slide-container">
                  <img src="http://placehold.it/350" id="id1"/>
                  <img src="http://placehold.it/350" />
                  <img src="http://placehold.it/350" />
                  <img src="http://placehold.it/350" />
                  <img src="http://placehold.it/350" />
              </div>

【问题讨论】：

content 属性只能用于::before/::after CSS 伪类，它不适用于img、input 或@987654329 等自闭合元素@。您需要将 <img> 元素包装在另一种类型的元素中才能正确设置它们的样式。

标签： javascript jquery html css hover

【解决方案1】：

您可以为图像添加自定义属性并使用 JavaScript 在悬停时显示它。

$(".hover-container").hide();
    
$('.slide-container img').hover(function () {
  $(".hover-container").show();
  $(".hover-container").text($(this).data('text') || '');
},function () {
  $(".hover-container").hide();
});

.slide-container {
    overflow: auto;
    white-space: nowrap;
    position: relative;
}

.hover-container {
  position: absolute;
  bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="slide-container">
  <img src="http://placehold.it/350" data-text="SOLD OUT 1"/>
  <img src="http://placehold.it/350"/>
  <img src="http://placehold.it/350" data-text="SOLD OUT 2"/>
  <img src="http://placehold.it/350" />
  <img src="http://placehold.it/350" data-text="SOLD OUT 3"/>
  <div class="hover-container"></div>
</div>

【讨论】：