Question

我在页面上有一个图像名称列表，当您将鼠标悬停在所在行上的图像上时，我希望显示缩略图。

我该怎么做？任何示例代码？

Answer 1

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

物品清单，悬停将显示该项目的缩略图

1 个答案: