Question

我正在生成一个在页面上水平滚动的图像列表： https://jsfiddle.net/9oLLv1op/3/

<ul class="images">
    <a href="images/Pumpkins01.png" target="_blank">
    <img src="images/Pumpkins01.png" alt="" width="300" height="400">
</a></li></ul>

当我将鼠标悬停在每个图像上时，我需要它在图像列表下方的不同div空间中显示不同的文本主体。使用css和div包装器来做这件事会更好吗？我很丢失。我已经找到了在不使用无序列表的情况下执行此操作的方法，但无法通过这种方式解决这个问题。任何帮助将不胜感激。

编辑：我需要为每个图像显示不同的文本正文，并且当用户将鼠标移开时，要覆盖的最后一个元素将使其文本保留在“show-me”div中。

Answer 1

JavaScript和CSS是两种可能的方法。

JavaScript：向图像添加一个悬停事件监听器，用于设置相应div的显示值。（＆＃39;没有＆＃39;表示不可见，＆＃39;阻止＆＃39;表示可见）

CSS：我认为这种方法看起来会更酷，尽管它会偏离原来的问题。我会创建与图像占据相同空间的div，并将它们设置为在悬停时可见。（显示：无; divs没有＆＃39;：hover＆＃39; puesdo-class。改为使用透明度。）

Answer 2

以下是使用jQuery的示例（可以在纯JS中完成）：https://jsfiddle.net/Pawel256/whfar56x/2/

1.添加一个div，你想要显示图像的描述

2.添加鼠标悬停并更改说明div中的文字：

$(".image1").mouseenter(function(){
    $("#show-me").text('1. This is image1 description. Lorem ipsum dolor sit amet');
});

3.记住添加mouseleave并清除描述div

$(".image1, .image2, .image3").mouseleave(function(){
    $("#show-me").text('');
});

鼠标悬停在列表图像上时显示文本

2 个答案: