Question

正如标题所述，我有一个幻灯片放映，并希望文本＆＃34;售完＆＃34;显示我是否悬停其中一个图像。到目前为止我找到的解决方案表明我应该使用图像包裹，但每当我使用<div>标签在幻灯片中包装图像时，滑块就会停止工作。一旦我悬停图像，我需要发生2种效果：制作具有低不透明度的叠加白色背景，以及固体文字说明＆＃34;售完＆＃34;。我正在使用＆＃34;内容＆＃34; CSS中的烦恼，但我不能让它出现。

＆＃13;

.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";
}

＆＃13;

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

＆＃13;

Answer 1

您可以为图片添加自定义属性，并使用JavaScript悬停显示。

＆＃13;

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

＆＃13;

.slide-container {
    overflow: auto;
    white-space: nowrap;
    position: relative;
}

.hover-container {
  position: absolute;
  bottom: 10px;
}

＆＃13;

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

＆＃13;

在幻灯片中以悬停方式显示图像上方的文本

1 个答案: