将鼠标悬停在列表图像

我生成，使用一个网页上水平滚动的图像列表时显示的文字： 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中。

来源

2016-09-27 nastalgia

你想在哪里放置文本的div？你能用它更新你的小提琴吗？ –

如果你想有一个元素（例如div），只需在用户将鼠标悬停在图像上时更改其中的文本，那么就需要使用JavaScript。 –

我需要为每个图像显示不同的文本主体，当用户鼠标悬停时，要悬停的最后一个元素将其文本保留在“show-me”div中。我更新了代码 - div正好在图像下方，稍后将进行格式化。 – nastalgia

下面是使用jQuery一个例子（可以以纯的JS进行）：https://jsfiddle.net/Pawel256/whfar56x/2/

1.增加与要显示为图像

2.增加鼠标悬停和变化的描述一个div描述格中的文本：

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

3.Remember添加鼠标离开并清除描述DIV

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

来源

2016-09-27 18:03:56

完美的作品，谢谢你的快速和翔实的教训，我非常感谢它，并祝你好 - 对于所有这些我都很新颖，只是为了创建一个组合网站而创建模拟 - 如果我使用纯CSS而不是有序和无序列表，您认为这会更好吗？ – nastalgia

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

JavaScript：在图像上添加悬停事件侦听器，该侦听器设置相应div的显示值。（'无'为隐形，'块'为可见）

CSS：我认为这种方法看起来更酷，虽然它会偏离原来的问题。我会创建占据与图像相同空间的div，并将它们设置为在悬停时可见。（display：none; divs没有'：hover'puesdo-class，而是使用透明度）。

来源

2016-09-27 17:37:35 Matthew

将鼠标悬停在列表图像

回答

相关问题