0

我正在尝试定位div的每一个第一和第二个图像。

<div class="poscik">        
    <div class="post-image-film">
        <img src="<?php bloginfo( 'template_url' ); ?>/images/film_hover.png" />        

       <img src="
                <?php
                if ($image_url_sm) {
                    echo $image_url_sm[0];
                } 
                else {
                    echo bloginfo( 'template_url' ) . "/images/generic_thumbnail.png";
                }?>
        " />    
</div>

首先是其他的悬停效果。

$('.post-image-film img').eq(0).css({
    'position': 'absolute',
    'z-index': '2'
}).hide();

$('.post-image-film img').eq(1).css({
    'position': 'absolute',
    'margin-top': '-270px;'
});

$('.poscik').hover(function () {
    $("img", this).eq(0).fadeToggle();
});

这是我到目前为止得到的。由于课程"poscik"重复。这仅适用于第一个 div class="poscik"。为了架起其他图像，我需要切换到eq(3)等等eq(4)。这对我来说是不可能的。帮助将不胜感激。

4

2 回答 2

1

您有两个相对简单的选项来选择前两个元素：

$('.post-image-film img:lt(2)')

JS 小提琴演示。

和：

$('.post-image-film img::nth-child(-n + 2)')

JS 小提琴演示。

参考：

于 2013-06-14T11:40:41.947 回答
0

我相信它会起作用：

$('.post-image-film img').children(':eq(0)').css({'position' : 'absolute', 'z-index' : '2'}).hide();
$('.post-image-film img').children(':eq(1)').css({'position' : 'absolute', 'margin-top' : '-270px;'});

$('.poscik').hover(function() {
    $("img", this).children(':eq(0)').fadeToggle();

});
于 2013-06-14T11:37:01.160 回答