將鼠標懸停在列表圖像

我生成，使用一個網頁上水平滾動的圖像列表時顯示的文字： 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

將鼠標懸停在列表圖像

回答

相關問題