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

an effect onto gallery of images using same javascript

本文关键字：图像 影响 JavaScript      更新时间：2023-09-26

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

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

          $(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();
                });
            });
相关文章：