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

Question

正如标题所述，我有一个幻灯片放映，如果我将鼠标悬停在其中一张图片上，我希望显示文本“已售罄”。到目前为止我找到的解决方案表明我应该使用图像环绕，但每当我使用 <div> 时标签将图像包裹在幻灯片中， slider 将停止工作。将图像悬停后，我需要产生 2 种效果:制作低不透明度的覆盖白色背景，以及显示“已售罄”的纯文本。我在 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>

Answer 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>