Question

I try to do a image gallery with a simple zoom effect, but i just get a hover effect every second element. any suggestions would be great.

here is the css:

ul{
    margin: 140px 0 0 140px;
    list-style-type: none;
}
li{
    width: 84px;
    height: 84px;
    border: 1px solid #ccc;
    float: left;
    margin: 2px;
    padding: 0;
    background-color: #efefef;
}
.item_resized{
    width: 170px;
    height: 170px;
    border: 1px solid #ccc; 
    z-index: 2;
    position: relative;
    margin-left: -43px;
    margin-top: -43px;
    background-color: #f0f0f0;
}

the html:

<ul class="imgGallery">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

and jquery:

jQuery(document).ready(function() {
    $('.imgGallery').find('li').each(function() {   
        $(this).hover(function() {                                              
            /* Add Img-Container */
            $(this).prepend('<div class="item_resized"></div>');
        },function() {
            /* Remove Img-Container */
            $(this).find('.item_resized').remove(); 
        });
    });
});

as you can see, the li-element 2 and 4 is not affected by the hover effect.

thanks!

danny

Answer 1

Try this

jQuery(document).ready(function() {
    $('.imgGallery').delegate('li', 'mouseover',function() {   
            /* Add Img-Container */
            $(this).prepend('<div class="item_resized"></div>');
        }).delegate('li', 'mouseout',function() {
            /* Remove Img-Container */
            $(this).find('.item_resized').remove(); 
        });
    });
});