Question

使用函数.hover（）时遇到问题。它是一个简单的悬停效果，在一个div中滑动一些内容，问题是我在页面中有多个div与w相同的类和此功能一次动画所有项目，而不仅仅是其中一个muose步骤，我该怎么办呢？提前致谢这是我的代码

html：

<div class="col-lg-4 col-md-4 col-sm-6 progetto hidden-xs">
    <div class="box-progetto-image">
        <?php the_post_thumbnail(); ?>
        <h2 class="titolo-progetto"><?php the_title(); ?></h2>
    </div>
    <div class="container-meta">
        <div class="container-cerchi">
            <a class="cerchio-progetto" href="<?php echo get_post_meta(get_the_ID(), 'yiw_progetti_link', true); ?>" title="<?php the_title(); ?>" rel="nofollow" target="_blank">
                <img src="<?php bloginfo('template_url'); ?>/img/link.png" alt="Visita il sito">
            </a>
            <a class="cerchio-progetto" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                <img src="<?php bloginfo('template_url'); ?>/img/plus.png" alt="Maggiori informazioni">
            </a> 
        </div>
        <div class="layout-image">
            <?php  if (class_exists('MultiPostThumbnails')) : 
                MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'layout-image');
            endif; ?>
        </div>
    </div>
</div>

ad这是我的jQuery：

脚本＆GT;

$(document).ready(function() {

    $('.progetto').hover(function() {
        $('.container-meta').css('right', '0');
        $('.titolo-progetto').css('opacity' , '0')
    }, function() {
        $('.container-meta').css('right', '100%');
        $('.titolo-progetto').css('opacity' , '1')
    });

});

Answer 1

问题是您使用的选择器将查找具有相同类的所有元素。您可以使用触发事件的元素作为搜索的上下文，这样选择器只会在其中找到元素：

$(document).ready(function() {

    $('.progetto').hover(function() {
        $('.container-meta', this).css('right', '0');
        $('.titolo-progetto', this).css('opacity' , '0')
    }, function() {
        $('.container-meta', this).css('right', '100%');
        $('.titolo-progetto', this).css('opacity' , '1')
    });

});

Answer 2

这只是编写@Guffa答案的另一种方式：

$(document).ready(function() {
    $('.progetto').hover(function() {
        //target only the desired elements by using $(this).find()
        $(this).find('.container-meta').css('right', '0');
        $(this).find('.titolo-progetto').css('opacity' , '0')
    }, function() {
        //target only the desired elements by using $(this).find()
        $(this).find('.container-meta').css('right', '100%');
        $(this).find('.titolo-progetto').css('opacity' , '1')
    });
});

Answer 3

感谢您的回复，此方法不起作用，但我找到了解决方案

   $(document).ready(function() {

    alert('funziona');

    //funzione che anima l'hover della pagina portfolio
    $('.progetto').hover(function() {
        $(this).children('div.container-meta').css('right', '0');
        $(this).find('h2.titolo-progetto').css('opacity' , '0')
    }, function() {
        $(this).children('div.container-meta').css('right', '100%');
       $(this).find('h2.titolo-progetto').css('opacity' , '1')
    });        

});

我怎样才能在一个元素上激活.hover（）函数

3 个答案: