0

我有以下代码，我使用它来实现使用 javascript 对图像的效果。效果就像当用户将鼠标悬停在主图像上时，over1 和 over2 是覆盖在其上的两个图像，提供了不错的信息。

现在我的问题是——我得到的代码只适用于单个图像。当我在图像库上实现它时，即使我只将鼠标悬停在一张图像上，所有图像仍然会被它们的信息覆盖。

我需要帮助，如果我将鼠标悬停在其他图像上，则不应显示其信息，只有一个应该处于活动状态。

我还需要知道如何将图像存储在文件夹中。到目前为止，我决定制作一个用于主图像，另一个用于叠加图像。

我的代码是

<html>
<head>
    <link href="css/overlaycss.css" rel="stylesheet" />
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $(".main").mouseenter(function() {
          $(".overlay").show();
        });
        $(".main").mouseleave(function() {
          $(".overlay").hide();
        });
        $(".main").mouseenter(function() {
          $(".overly").show();
        });
        $(".main").mouseleave(function() {
          $(".overly").hide();
        });
      });
    </script>
</head>

<body style="margin:0px; padding-top:0px">
    <ul>
        <li>
            <a href="">
                <img class="main" src="image/productold.JPG" />
                <img class="overlay" src="image/overlay/over1.jpg"/>
                <img class="overly" src="image/overlay/over2.jpg"/>
            </a>
        </li>
        <li> 
            <a href="">
                <img class="main" src="image/productold.JPG" />
                <img class="overlay"  src="image/overlay/over1.jpg"/>
                <img class="overly" src="image/overlay/over2.jpg"/>
            </a>
        </li>
    </ul>
</body>
</html>

CSS是——

li{
    position:relative;
    float:left;
    padding-left:5px;
}

.main {   
    width:200px;
    height:200px;
}

.overlay 
{
    position:absolute;
    height:50px;
    width:150px;
    top:0;
    left:0;
    display:none;
}

.overly 
{
    position:absolute;
    height:50px;
    width:150px;
    bottom:0;
    right:0; 
    display:none;
}
4

1 回答 1

0

要在单个图像上显示悬停图像，请尝试以下操作：-

          $(document).ready(function() {
                $("ul li").mouseenter(function() {
                    $(this).find(".overlay").show();
                    $(this).find(".overly").show();
                });
                $("ul li").mouseleave(function() {
                    $(this).find(".overlay").hide();
                    $(this).find(".overly").hide();
                });
            });
于 2013-11-07T07:51:55.660 回答