an effect onto gallery of images using same javascript

问题

i have the following code using which i implement effects on an image using javascript. the effect is like when an user hovers on the main image then the over1 and over2 are the two images which gets overlayed on it providing decent information.

now my problem is-- the code i got is for only single images. when i am implementing it on gallery of images then even i hover on only one image still all images get overlayed with their information.

i need help regarding that if i hover on then other images shouldn't be displaying their info only one should be active.

i also need to know how should i store my images in folders. so far i had decided to make one for main images and other for overlaying images.

my code is

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

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

回答1:

For displaying hover images on individual images try this:-

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

来源：https://stackoverflow.com/questions/19830285/an-effect-onto-gallery-of-images-using-same-javascript

标签

javascript

html

css

image

gallery