Нет парения на следующем элементе li - PullRequest
Новая
       46

Нет парения на следующем элементе li

0 голосов
/ 22 июня 2011

Я пытаюсь создать галерею изображений с простым эффектом увеличения, но я просто получаю эффект наведения на каждый второй элемент. любые предложения будут великолепны.

вот 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.

спасибо!

Danny

Ответы [ 2 ]

1 голос
/ 22 июня 2011

Попробуйте это 

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(); 
        });
    });
});
0 голосов
/ 22 июня 2011

попробуйте навести only 2-й элемент каждого ul

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

пожалуйста, посмотрите на jQuery: nth-child ()

для каждого второго элемента использования :nth-child(odd)

...