List of items, hovering will show a thumbnail of the item_问答_开发者

List of items, hovering will show a thumbnail of the item

开发者 https://www.devze.com 2023-02-04 22:40 出处：网络

I have a list开发者_C百科 of image names on a page, I want to display a thumbnail when you hover over the image on the line you are on.

相关专题：jquery

I have a list开发者_C百科 of image names on a page, I want to display a thumbnail when you hover over the image on the line you are on.

How can I do this? Any example code?

CONTENT OF CSS styles.css FILE

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

CONTENT OF scripts.js FILE

$(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 CODE

<!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>