항목 목록은 항목의 미리보기를 표시합니다.

페이지에 이미지 이름 목록이 있습니다. 내가있는 행의 이미지 위로 마우스를 가져 가면 미리보기 이미지를 표시하려고합니다.항목 목록은 항목의 미리보기를 표시합니다.

어떻게하면됩니까? 모든 예제 코드? CSS의을 styles.css 파일의

2011-01-14 Blankman

당신이 중 하나를 시도해 봤어 이들? http://www.google.com/#q=jquery+thumbnail+hover – Alec

콘텐츠는

.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

항목 목록은 항목의 미리보기를 표시합니다.

답변

관련 문제