我在使用 .hover () 函数时遇到问题。 这是一个简单的悬停效果,在带有一些内容的 div 中滑动,问题是我在页面中有多个具有相同类的 div 并且此功能一次动画所有元素,而不仅仅是 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>
这是我的 jQuery :
脚本>
$(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')
});
});
最佳答案
问题是您使用的选择器会找到具有相同类的所有元素。您可以使用触发事件的元素作为搜索的上下文,这样选择器将只查找其中的元素:
$(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')
});
});
关于javascript - 我如何一次只在一个元素上激活 .hover() 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26831864/