Question

我有以下代码使用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;
}

Answer 1

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

          $(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();
                });
            });

使用相同的javascript对图像库的影响

1 个答案: