Changing the colour of .hover <h2> heading (yet maintaining the original color of other <h2>s)

I was looking for help regarding a basic change of color, triggered by the hover event using jQuery.

Basically, I have a series of posts shown on the frontage of my WordPress. Each post is a div class, normally created by WordPress.

I decided to change it visually by:

  1. Hovering over the whole div (div class=”post”>)
  2. The div background color changes from #FFF TO #333
  3. Changes the text from #000 TO #fff

Unfortunately, when you hover over the div, the event also unintentionally changes the text color for all the other posts too.

How do I isolate the event, so that only the current div being hovered over, does the above events, but not change all the other divs?

I had the wrap the tag with to make the css transitions work.

   jQuery(document).ready(function(){
  jQuery('.article_highlight').hover(function(){ 
  jQuery(this).css('border', '1px solid #cccccc');
jQuery(this).css('background-color', '#333');
jQuery('.entry-summary p').css('color', '#fff');
  },function(){
    jQuery(this).css('border', 'none');
jQuery(this).css('background-color', '#fff');
jQuery('.entry-summary p').css('color', '#242424');
  });
});

 <div class="article_highlight"><article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <?php if ( has_post_thumbnail() && ! post_password_required() ) : ?>
        <a class="post-thumbnail" href="<?php the_permalink(); ?>" aria-hidden="true">
            <?php the_post_thumbnail( 'post-thumbnail', array( 'alt' => get_the_title() ) ); ?>
        </a>
    <?php endif; ?>

    <?php if ( 'post' == get_post_type() ) : ?>
        <div class="entry-date">
            <?php resonar_entry_date(); ?>
        </div><!-- .entry-date -->
    <?php endif; ?>

    <?php the_title( sprintf( '<header class="entry-header"><h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2></header>' ); ?>

    <div class="entry-summary">
        <?php the_excerpt(); ?>
    </div><!-- .entry-summary -->
</article></div>

Read more here: Changing the colour of .hover <h2> heading (yet maintaining the original color of other <h2>s)

Leave a Reply

Your email address will not be published. Required fields are marked *