Select the current div element on hover using class in Javascript

2 Views

I am making a WordPress blog and editing a plugin’s PHP files. The plugin displays all post using a while loop. On hover the original the current div of class="myClass2” & id="div2" should be replaced with corresponding div of class="myClass1" & id="div1" using a Javascript function but whichever post I hover on only the first post is replaced my its corresponding div if id is used and ClassName is not working. 

    while ( $the_query->have_posts() ) { 
                            $the_query->the_post(); ?>
                            <article class="post type-post format-standard">                            
                                
                                <div  style="display:none;width:270px;height:370px;background-color:red" class="myClass1" onmouseout="myfunction2()" id="div1">
                                    <?php the_excerpt(); ?>
                                </div>                                  
                                
                                <div class="myClass2" id= "div2" onmouseover="myfunction1()">
                                    <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                                                                                        <img width="60" height="60" class="attachment-popular-post-featured-image wp-post-image" src="<?php echo $no_preview_img; ?>" />
                                        <?php } else {
                                            $check_size = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'popular-post-featured-image' );
                                            
                                        } ?>
                                    </a>
                                    
                                    
                                    <div id="mydiv3" >  <?php the_excerpt(); ?></div>
                                </div><!-- .entry-content -->
                            </article><!-- .post -->  


<script>
function myFunction1(){
document.getElementsByClassName("myClass1").style.display="block";
document.getElementsByClassName("myClass2").style.display="none";
}

function myFunction2(){
document.getElementsByClassName("myClass1").style.display="none";
document.getElementsByClassName("myClass2").style.display="block";
}
</script>
Post Views: 2

Related posts

1 comment

  1. the function getElementsByClassName() returns an Array of elements. Therefore you have to loop through each item and apply the style individually.

    function hide (element) {
    element.style.display="none";
}
function show (element) {
    element.style.display="block";
}

function myFunction1(){
    var array1 = document.getElementsByClassName("myClass1");
    var array2 = document.getElementsByClassName("myClass2");

    for (var i=0; i < array1.length; i++) { 
        show(array1[i]);
    }
    for (var i=0; i < array2.length; i++) { 
        hide(array2[i]);
    }
}

Comments are closed.