列表中的項目，懸停會顯示項目的縮略圖

我有一個頁面上的圖像名稱列表，我想顯示一個縮略圖，當你把鼠標懸停在你的線上的圖像。列表中的項目，懸停會顯示項目的縮略圖

我該怎麼做？任何示例代碼？

2011-01-14 Blankman

你有沒有嘗試任何的這些？ http://www.google.com/#q=jquery+thumbnail+hover – Alec 2011-01-14 17:01:29

內容CSS styles.css的文件

.secret { 
    display: none; 
    height: 20%; 
    background-color: #ccc; 
    position: absolute; 
    padding: 3px; 
}

的scripts.js中的文件內容

$(document).ready(function(){ 
    $('.hoverMe').hover(function(event){ 
     child = $(this).children(); 
     child.css("left", event.pageX + 10); 
     child.css("top", event.pageY + 10); 
     child.show(); 
     }, function(){ 
     $(this).children().hide(); 
    }) 
});

HTML代碼

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 


    <head> 
     <title>jQuery Test</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <link rel="stylesheet" href="styles.css"/> 
     <script type="text/javascript" src="jquery-1.4.4.min.js"></script> 
     <script type="text/javascript" src="scripts.js"></script> 
    </head> 

    <body> 


    <ul> 
      <li class="hoverMe">Image One 
       <img class="secret" src="img/image1.jpg" alt="Image 1"/> 

      </li> 
      <li class="hoverMe">Image Two 
       <img class="secret" src="img/image2.png" alt="Image 2"/> 
      </li> 
      <li class="hoverMe">Image N 
       <img class="secret" src="img/imageN.jpg" alt="Image N"/> 
      </li> 
     </ul> 

    </body> 
</html>

來源

2011-01-14 17:12:27 Yordans

列表中的項目，懸停會顯示項目的縮略圖

回答

相關問題