Title: Hover effect issue
Last modified: September 1, 2016

---

# Hover effect issue

 *  Resolved [jrcollins](https://wordpress.org/support/users/jrcollins/)
 * (@jrcollins)
 * [9 years, 8 months ago](https://wordpress.org/support/topic/hover-effect-issue/)
 * On my category pages the hover effect for the post title is also activated when
   hovering over the post thumbnail and post excerpt. Can anyone explain how this
   is happening?
 * You can see what I’m talking about [here](http://demos.famethemes.com/codilight/category/technology/).
 * I’m modifying the category template and would like to achieve the same effect.
 * Here’s the code from the category template:
 *     ```
       <article id="post-<?php the_ID(); ?>" <?php post_class( 'col-md-6 col-sm-12' ); ?>>
       <div class="entry-thumb">
           <a href="<?php echo esc_url( get_permalink() ); ?>" title="<?php the_title(); ?>">
               <?php
               if ( has_post_thumbnail( ) ) {
                   the_post_thumbnail( 'codilight_lite_block_2_medium' );
               } else {
                   echo '<img alt="'. esc_html( get_the_title() ) .'" src="'. esc_url( get_template_directory_uri() . '/assets/images/blank325_170.png' ) .'">';
               }
               ?>
           </a>
           <?php
           $category = get_the_category();
           if($category[0]){
               echo '<a class="entry-category" href="'.get_category_link($category[0]->term_id ).'">'.$category[0]->cat_name.'</a>';
           }
           ?>
       </div>
       <div class="entry-detail">
           <header class="entry-header">
               <?php the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
               <?php if ( 'post' === get_post_type() ) codilight_lite_meta_1();?>
           </header><!-- .entry-header -->
   
           <div class="entry-excerpt">
               <?php echo codilight_lite_excerpt(120); ?>
           </div><!-- .entry-content -->
        </div>
       </article><!-- #post-## -->
       ```
   

Viewing 15 replies - 1 through 15 (of 16 total)

1 [2](https://wordpress.org/support/topic/hover-effect-issue/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/hover-effect-issue/page/2/?output_format=md)

 *  [ikaring](https://wordpress.org/support/users/ikaring/)
 * (@ikaring)
 * [9 years, 8 months ago](https://wordpress.org/support/topic/hover-effect-issue/#post-7689425)
 * Just wrap whole block inside the article with a tag, instead of wrapping thumbnail
   image only.
 *     ```
       <article id="post-<?php the_ID(); ?>" <?php post_class( 'col-md-6 col-sm-12' ); ?>>
       <a href="<?php echo esc_url( get_permalink() ); ?>" title="<?php the_title(); ?>">
         <div class="entry-thumb">
             <?php
             if ( has_post_thumbnail( ) ) {
                 the_post_thumbnail( 'codilight_lite_block_2_medium' );
             } else {
                 echo '<img alt="'. esc_html( get_the_title() ) .'" src="'. esc_url( get_template_directory_uri() . '/assets/images/blank325_170.png' ) .'">';
             }
             ?>
             <?php
             $category = get_the_category();
             if($category[0]){
                 echo '<a class="entry-category" href="'.get_category_link($category[0]->term_id ).'">'.$category[0]->cat_name.'</a>';
             }
             ?>
         </div>
         <div class="entry-detail">
             <header class="entry-header">
                 <?php the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
                 <?php if ( 'post' === get_post_type() ) codilight_lite_meta_1();?>
             </header><!-- .entry-header -->
   
             <div class="entry-excerpt">
                 <?php echo codilight_lite_excerpt(120); ?>
             </div><!-- .entry-content -->
          </div>
       </a>
       </article><!-- #post-## -->
       ```
   
 *  Thread Starter [jrcollins](https://wordpress.org/support/users/jrcollins/)
 * (@jrcollins)
 * [9 years, 8 months ago](https://wordpress.org/support/topic/hover-effect-issue/#post-7689429)
 * Yes, I could but that’s not how it’s done in the theme.
 *  [ikaring](https://wordpress.org/support/users/ikaring/)
 * (@ikaring)
 * [9 years, 8 months ago](https://wordpress.org/support/topic/hover-effect-issue/#post-7689442)
 * Ah, then this selector is the point.
    They put :hover on article tag.
 * `.block1_grid article:hover .entry-title a`
 *  Thread Starter [jrcollins](https://wordpress.org/support/users/jrcollins/)
 * (@jrcollins)
 * [9 years, 8 months ago](https://wordpress.org/support/topic/hover-effect-issue/#post-7689446)
 *     ```
       .block1_grid {
           article {
               @include rem('padding-bottom', 25px);
               position: relative;
               &:hover {
                   .entry-title a{
                       color: $primary;
                       hyphens: auto;
                   }
               }
               &:last-of-type {
                   border-bottom: none;
               }
           }
       ```
   
 * I found this in one of the theme’s SASS files which seems to be where the hover
   effect is coming from.
 *  Thread Starter [jrcollins](https://wordpress.org/support/users/jrcollins/)
 * (@jrcollins)
 * [9 years, 8 months ago](https://wordpress.org/support/topic/hover-effect-issue/#post-7689450)
 * Now I just have to work out why it’s not working in my customized category template.
 *  [ikaring](https://wordpress.org/support/users/ikaring/)
 * (@ikaring)
 * [9 years, 8 months ago](https://wordpress.org/support/topic/hover-effect-issue/#post-7689451)
 * Does parent/ancestor element of article has .block1_grid class?
    It’s outside
   of your code snippet shown above.
 *  Thread Starter [jrcollins](https://wordpress.org/support/users/jrcollins/)
 * (@jrcollins)
 * [9 years, 8 months ago](https://wordpress.org/support/topic/hover-effect-issue/#post-7689469)
 * Yes, I should have included it above.
 *  Thread Starter [jrcollins](https://wordpress.org/support/users/jrcollins/)
 * (@jrcollins)
 * [9 years, 8 months ago](https://wordpress.org/support/topic/hover-effect-issue/#post-7689470)
 * I’m using the same CSS selectors in my custom template but it’s not working.
 *  [ikaring](https://wordpress.org/support/users/ikaring/)
 * (@ikaring)
 * [9 years, 8 months ago](https://wordpress.org/support/topic/hover-effect-issue/#post-7689475)
 * Can I have the URL?
 *  Thread Starter [jrcollins](https://wordpress.org/support/users/jrcollins/)
 * (@jrcollins)
 * [9 years, 8 months ago](https://wordpress.org/support/topic/hover-effect-issue/#post-7689488)
 * The site’s not live. I’m developing it offline.
 *  [ikaring](https://wordpress.org/support/users/ikaring/)
 * (@ikaring)
 * [9 years, 8 months ago](https://wordpress.org/support/topic/hover-effect-issue/#post-7689491)
 * OK.
    Then, you need to check developer tools of browser yourself to see why that
   specific css rule is not applied to the titles. I doubt if that css (not SASS)
   is read though.
 *  Thread Starter [jrcollins](https://wordpress.org/support/users/jrcollins/)
 * (@jrcollins)
 * [9 years, 8 months ago](https://wordpress.org/support/topic/hover-effect-issue/#post-7689554)
 * > I doubt if that css (not SASS) is read though
 * What do you mean?
 *  [ikaring](https://wordpress.org/support/users/ikaring/)
 * (@ikaring)
 * [9 years, 8 months ago](https://wordpress.org/support/topic/hover-effect-issue/#post-7689559)
 * I thought if DOM structures matches `.block1_grid article:hover .entry-title 
   a`, then only possibility is correct css file is not loaded.
    Pls check if your
   style.css has `.block1_grid article:hover .entry-title a`, not in the SASS file.
 *  Thread Starter [jrcollins](https://wordpress.org/support/users/jrcollins/)
 * (@jrcollins)
 * [9 years, 8 months ago](https://wordpress.org/support/topic/hover-effect-issue/#post-7689565)
 * Do you mean the SASS file is not being loaded? I’m using a child theme so maybe
   that’s why.
 *  [ikaring](https://wordpress.org/support/users/ikaring/)
 * (@ikaring)
 * [9 years, 8 months ago](https://wordpress.org/support/topic/hover-effect-issue/#post-7689566)
 * Usually, SASS files are compiled to a css file beforehand, and load the css file
   to pages.
    So be sure to enqueue parent theme’s style.css or include it to child
   theme’s style.css.
 * [https://codex.wordpress.org/Child_Themes](https://codex.wordpress.org/Child_Themes)

Viewing 15 replies - 1 through 15 (of 16 total)

1 [2](https://wordpress.org/support/topic/hover-effect-issue/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/hover-effect-issue/page/2/?output_format=md)

The topic ‘Hover effect issue’ is closed to new replies.

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 16 replies
 * 2 participants
 * Last reply from: [jrcollins](https://wordpress.org/support/users/jrcollins/)
 * Last activity: [9 years, 8 months ago](https://wordpress.org/support/topic/hover-effect-issue/page/2/#post-7689569)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics