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>
the function
getElementsByClassName()
returns an Array of elements. Therefore you have to loop through each item and apply the style individually.