Hover effect issue

  • Resolved jrcollins

    (@jrcollins)


    8 years, 3 months ago

    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.

    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)

  • 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

    (@jrcollins)

    Yes, I could but that’s not how it’s done in the theme.

    Ah, then this selector is the point.
    They put :hover on article tag.

    .block1_grid article:hover .entry-title a

    Thread Starter jrcollins

    (@jrcollins)

    .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

    (@jrcollins)

    Now I just have to work out why it’s not working in my customized category template.

    Does parent/ancestor element of article has .block1_grid class?
    It’s outside of your code snippet shown above.

    Thread Starter jrcollins

    (@jrcollins)

    Yes, I should have included it above.

    Thread Starter jrcollins

    (@jrcollins)

    I’m using the same CSS selectors in my custom template but it’s not working.

    Can I have the URL?

    Thread Starter jrcollins

    (@jrcollins)

    The site’s not live. I’m developing it offline.

    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

    (@jrcollins)

    I doubt if that css (not SASS) is read though

    What do you mean?

    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

    (@jrcollins)

    Do you mean the SASS file is not being loaded? I’m using a child theme so maybe that’s why.

    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.www.ads-software.com/Child_Themes

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Hover effect issue’ is closed to new replies.