jQuery 悬停状态在 Wordpress 循环中的单个帖子上答案

【问题标题】：jQuery hover states on individual posts in Wordpress loopjQuery 悬停状态在 Wordpress 循环中的单个帖子上
【发布时间】：2014-11-22 15:13:10
【问题描述】：

我有一个在 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');
    });
});

【问题讨论】：

给我看你的代码：>
我把上面的代码贴出来了。感谢您查看此内容！
Damian — 非常感谢您的编辑！这就是我希望它的格式，但无法弄清楚为什么我的不可靠。
doyousmellham，我为你准备了答案，但@Sruly 是第一个 - 该死的早餐，我不应该吃东西！

标签： jquery css hover wordpress

【解决方案1】：

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

一旦你钩住悬停事件，你就可以使用“this”来继续效果。

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

});

【讨论】：

这正好解决了我的问题！非常感谢。

【解决方案2】：

很难得到你描述的行为。如果你在元素中添加.beHovered 类并编写这个js：

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

或者这个css：

.beHovered:hover {
   //hover styles
}

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

顺便说一句。请给我看你的代码，我很感兴趣你是怎么做到的：当我将鼠标悬停在其中一个帖子上时，每个帖子的悬停状态

【讨论】：