特定のチームメンバーごとにホバーオーバーレイテキストを追加します

Question

私はチームメンバーと一緒にカスタム投稿タイプを作成しました。メンバーにカーソルを合わせ、そのメンバーのオーバーレイテキストを表示して次のメンバーを表示します次のメンバーのためのオーバーレイテキストなどがあります。

今私は、ランダムなチームメンバーにカーソルを合わせると、それはすべての「オーバーレイテキスト」divを示しています。ここ

が私のコードです：

  <?php 

      $loop = new WP_Query(array('post_type' => 'team', 'orderby'=>'post_id', 'order'=>'ASC'));  

      if($loop->have_posts()) : 
       while($loop->have_posts()) : $loop->the_post(); ?> 
        <div class="col-sm-4"> 
         <div class="team-member"> 
          <div class="member-img"> 
           <?php the_post_thumbnail(); ?> 
          </div> 
          <h4><?php the_title(); ?></h4> 
          <?php the_content(); ?> 

          <div class="overlay-text"> 
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem maxime id accusantium voluptates. Assumenda, maiores illum nemo aspernatur pariatur. Magnam nihil, enim rerum cupiditate reprehenderit animi dolorum eveniet, voluptas explicabo.</p> 
          </div> 
         </div> 
        </div> 
       <?php endwhile; 
      endif; 
     ?> 

私は、オーバーレイテキスト段落がある知っていますハードコード私はこれにも解決策を見つけることを試みています。オーバーレイテキストの

CSS：オーバーレイテキストの

.team-member .overlay-text { 
    opacity: 0; 
    visibility: hidden; 
    background: rgba(15, 175, 151, 0.95) none repeat scroll 0 0; 
    color: #fff; 
    bottom: 0; 
    left: 15px; 
    padding: 15px; 
    position: absolute; 
    right: 15px; 
    top: 0; 
    transition: all 0.5s ease-in-out 0s; 
} 
.team-member .overlay-text.active { 
    opacity: 1; 
    visibility: visible; 
} 

Javascriptを：あなたはthisが必要

function showOverlay() { 
    jQuery('.team-member').hover(function(){  
     jQuery('.overlay-text').addClass('active');  
    },  
    function(){  
     jQuery('.overlay-text').removeClass('active');  
    }); 
} 

Answer 1

は、それだけでその特定の1

JSにクラスを追加します。

function showOverlay() { 
     $('.team-member').on('mouseenter',function(){  
      $(this).find('.overlay-text').addClass('active');  
     }).on('mouseleave',function(){ 
      $(this).find('.overlay-text').removeClass('active'); 
     }); 
    }