获取当前元素并显示数据

Question

我想在图像上移动时显示当前元素数据。

这是我的PHP代码。

<div class="staff">
    <?php
        $staff_arg = array('post_type'=>'staff','posts_per_page'=>4,'order'=>'DESC');
        $get_staff = new WP_QUERY($staff_arg);

        if($get_staff->have_posts()){
            global $post;
            while($get_staff->have_posts()) : $get_staff->the_post(); ?>
                <div class="content_staff">


                    <?php
                        if(has_post_thumbnail()){
                            the_post_thumbnail();
                        }
                     ?>

                </div>
                <div class="hover_staff" id="temp_" style="display:none">
                    <h3><?php echo $post->post_title;?></h3>
                    <span><?php echo get_post_meta($post->ID,'professional', true)?></span>
                     <p><?php echo $post->post_content;?></p>
                </div>
            <?php
            endwhile;
        }
     ?>
</div>

第一次hover_staff div是隐藏的，它会在悬停当前图片后显示。

我为它执行了jquery代码，但它显示了所有

jQuery('.content_staff img').on('hover',function(){

    if(jQuery(this)){
        jQuery('.hover_staff').show();
    }
})

和HTML LIke

<div class="content_staff">
  <img width="225" height="225" sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 60vw, (max-width: 1362px) 62vw, 840px" srcset="http://192.168.1.179/lancemontana/wp-content/uploads/2016/11/s2.jpeg 225w, http://192.168.1.179/lancemontana/wp-content/uploads/2016/11/s2-150x150.jpeg 150w" alt="s2" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" src="http://192.168.1.179/lancemontana/wp-content/uploads/2016/11/s2.jpeg">                    
</div>

我怎么能这样做？