Question

我试图定位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)等等。这对我来说是不可能的。帮助将不胜感激。

Answer 1

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

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

JS Fiddle demo

和

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

JS Fiddle demo

参考文献：

CSS :nth-child()。
:lt() selector。

Answer 2

我相信它会起作用：

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

});

反复瞄准div的图像

2 个答案: