Question

我尝试使用简单的缩放效果制作图库，但我只是每隔一个元素获得一个悬停效果。任何建议都会很棒。

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

html：

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

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

如您所见，li元素2和4不受悬停效果的影响。

谢谢！

丹尼

Answer 1

试试这个

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

Answer 2

尝试将每个only

的ul 2个元素悬停起来

<script>$("ul li:nth-child(2)").hover(function(){...});</script>

请查看jQuery:nth-child()

每个2'元素使用:nth-child(odd)

没有悬停在下一个li元素上

2 个答案: