Wordpress 루프의 개별 게시물에 대한 jQuery 호버 상태

Question

Wordpress 루프에 여러 게시물을 표시하는 페이지가 있습니다. 나는 jQuery를 통해 게시물에 대한 호버 (hover) 상태를 만들었고, 클래스를 대상으로 ".active"클래스를 추가했다. 게시물 중 하나를 가리키면 모든 게시물의 마우스 오버 상태가 모두 동일한 클래스를 사용하므로 활성 상태가됩니다.

마우스를 올리면 마우스를 올리면 마우스를 가리키면 표시됩니다.

나는 그들이 ID에 의해 표적이 될 필요가있다는 것을 나는 알고있다, 그러나 나는 연속적으로 추가 한 포스트에이 ID를 적용하는 방법 또는 각각을 위해 새로운 원본없이 다른 ID를 동적으로 표적으로하는 jQuery를 만드는 방법을 모른다.

도움 주셔서 감사합니다.

여기 내 맞춤 게시 유형 "내 팀"의 루프입니다. 팀 구성원의 사진 격자를 표시하는 페이지입니다.

<!--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 선택기를 사용해야합니다.

호버 이벤트를 연결하면 "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'); 
}); 

});

Answer 2

그것은 당신이 설명하는 동작을 취득 정말 어렵다. 당신이 요소에 클래스 .beHovered를 추가하고 작성하는 경우이 JS :

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

하거나 CSS :

.beHovered:hover { 
    //hover styles 
} 

항상 만에 공중 선회 요소의 결합 효과, 모든합니다.

BTW. 코드를 보여주세요. 제발, 당신이 어떻게했는지 매우 흥미가 있습니다. 게시물 중 하나를 가리키면 모든 게시물의 마우스 오버 상태가 나타납니다.