how to use tooltip in wordpress loop via jquery

3 Views

I have a wordpress loop in my index.php: 

<?php  
$custom_query = new WP_Query(array(
        'post_status' =>'publish',
        'post_type' =>'post',
        'order' =>'descending',
        'orderby' =>'ID',
        'posts_per_page' =>'8',
        'paged' => (get_query_var('paged')) ? get_query_var('paged') : 1        
    ));
?>  
<?php if($custom_query->have_posts()) : 
    while($custom_query->have_posts()) : $custom_query->the_post();?>
        <div class="news-box" >
            <div class="news-image" ><?php if ( has_post_thumbnail() ) {                the_post_thumbnail();} ?></div>
            <div class="news-title">
                <h4><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><? php the_title(); ?></a></h4>
            </div>
        </div>
<?php endwhile;endif;?><?php wp_reset_query(); ?>

I want to show “.news-title” when user hover over “.news-box”.i used this script:

Read More
<script type="text/javascript">
    $(function() {
        $( ".news-box" ).hover(function() {
            $( ".news-title" ).show("slow").fadeToggle(500);
        });
    });
</script>

When I hover “.news-box”, all of the post titles appear, instead of just the one.

Post Views: 3

Related posts

Leave a Reply

1 comment

  1. The code in the question tells jQuery to show all .news-title elements when you hover over any of the .news-box elements.

    Modify your script as follows.

    Note that this change causes it to find just the one title within the .news-box element and displays it.

    <script>
    $(function() {
        $( ".news-box" ).hover(function() {
            $(this).find(".news-title" ).show("slow").fadeToggle(500);
        });
    });
</script>