Question

我有一个页面，在Wordpress循环中显示多个帖子。我已经通过jQuery为帖子创建了一个悬停状态，通过他们的类来定位它们并添加一个“.active”类。当我将鼠标悬停在其中一个帖子上时，每个帖子的悬停状态都会变为活动状态，因为它们都使用相同的类。

我怎样才能让只有悬停的帖子显示其悬停状态？

我知道他们需要成为ID的目标，但我不知道如何将这些ID应用于不断添加的帖子，或者如何让jQuery动态地定位不同的ID而不为每个ID添加新脚本。

感谢您的帮助！

这是我的自定义帖子类型“团队”的循环。这是一个显示团队成员照片网格的页面。

<!--The Loop-->
<?php

$args = array(
    'post_type' => 'team'
);

$the_query = new WP_Query( $args );

?>
<?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

    <div class="team-grid-item">
        <div class="team-grid-title">
            <h4><?php the_field('team_member_name'); ?></h4>
            <div class="team-line"></div>
            <h4><?php the_field('team_member_title'); ?></h4>
        </div><!--.team-grid-title-->
        <div class="team-grid-color-overlay"></div>
        <div class="team-grid-image-container">
            <img class="team-grid-image" src="<?php echo get_field('team_member_photo')['url']; ?>" alt="<?php echo get_field('team_member_photo')['alt']; ?>" />
        </div><!--.team-grid-image-container-->
    </div><!--.team-grid-item-->

<?php endwhile; else: ?>
    <p>No posts here</p>
<?php endif; ?>

我的悬停状态脚本：

$(document).ready(function(){
    $(".team-grid-item").hover(function(){
        $('.team-grid-title').fadeIn(300);
        $('.team-grid-color-overlay').addClass('active');    
    }, function(){
        $('.team-grid-title').fadeOut(300);
        $('.team-grid-color-overlay').removeClass('active');
    });
});

Answer 1

您需要使用相对jquery选择器。

挂钩悬停事件后，您将使用“此”继续效果。

$(document).ready(function(){
$(".team-grid-item").hover(function(){
    $(this).find('.team-grid-title').fadeIn(300);
    $(this).find('.team-grid-color-overlay').addClass('active');    
}, function(){
    $(this).find('.team-grid-title').fadeOut(300);
    $(this).find('.team-grid-color-overlay').removeClass('active');
});

}）;

Answer 2

很难获得你描述的行为。如果将类.beHovered添加到元素并编写此js：

$('.beHovered').hover(function() {
   //mouseenter code
}, function() {
   //mouseleave code
});

或者这个css：

.beHovered:hover {
   //hover styles
}

总是只悬停元素绑定效果，而不是全部。

顺便说一句。请告诉我你的代码，我对你是如何做到这一点非常感兴趣：当我将鼠标悬停在其中一个帖子上时，每个帖子的悬停状态

jQuery悬停在Wordpress循环中的各个帖子上的状态

2 个答案: