Image overlay hover fails after hover action on link

Question

I have the following HTML:

<div class="post-box">
       <a href='<?php the_permalink() ?>'>
            <span class='overlay'></span>
            <div class='post-img' style="background-image:url('<?php echo wp_get_attachment_url(get_post_thumbnail_id($post->ID)) ?>');"></div>
       </a>
       <a class='post-title' href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
       <p><?php the_excerpt(); ?></p>
       <a  class='read-more' href="<?php the_permalink(); ?>">Read more</a>
 </div>

This is the CSS which causes an overlay on the image on hover:

.post-img{
    height:300px;
    width: 100%;
    background-size:cover;
    transition : opacity 200ms ease-out; 
    -webkit-transition : opacity 200ms ease-out; 
    -moz-transition : opacity 200ms ease-out;
    -o-transition : opacity 200ms ease-out;    
}
.post-img:hover{
  opacity:0.5;
}
span.overlay {
    background-color: #f39300;
    cursor: pointer;
    height: 300px;
    width: 585px;
    position: absolute;
    left: 0;
    z-index: 10;
    opacity: 0;
}
span.overlay:hover {
  opacity: .5;
  transition: opacity 200ms ease-in;
  -webkit-transition: opacity 200ms ease-in;
  -moz-transition: opacity 200ms ease-in;
  -o-transition: opacity 200ms ease-in;
}

All of the above is working fine and I'm happy with it.

The issue is that I also have a "Read More" button in the markup, which — when hovered over — I want show the overlay image as well. I figured I'd use jQuery to achieve this.

I have the following script:

$(document).ready(function () {
    $('#srch-term').click(function () {
        if ($('#search-builder').is(":hidden")) {
            $("#search-builder").slideDown("fast");
        } else {
            $("#search-builder").slideUp("fast");
        }
    });
    $('.read-more').hover(
            function () {
                $img = $(this).closest('div').find('.post-img');
                $overlay = $(this).closest('div').find('.overlay');
                $img.css({
                    "opacity": "0.5"
                });
                $overlay.css({
                    "opacity": ".5",
                    "transition": "opacity 200ms ease-in",
                    "-webkit-transition": "opacity 200ms ease-in",
                    "-moz-transition": "opacity 200ms ease-in",
                    "-o-transition": "opacity 200ms ease-in"
                });
            }, function () {
        $img = $(this).closest('div').find('.post-img');
        $overlay = $(this).closest('div').find('.overlay');
        $img.css({
            "opacity": "1.0",
            "height": "300px",
            "width": "100%",
            "background-size": "cover",
            "transition": "opacity 200ms ease-out",
            "-webkit-transition": "opacity 200ms ease-out",
            "-moz-transition": "opacity 200ms ease-out",
            "-o-transition": "opacity 200ms ease-out"
        });
        $overlay.css({
            " background-color": "#f39300",
            "cursor": "pointer",
            "height": "300px",
            "width": "585px",
            "position": "absolute",
            "left": "0",
            "z-index": "10",
            "opacity": "0"
        });
    });
});

The script works great, but when I hover off the button and attempt to hover on the image the overlay no longer appears.

So to summarize:

I use CSS to show an overlay when hovering over the div with class .post-img and it works. I use jQuery to show the overlay when hovering over a link with class .read-more — and it works — but when I hover out, it no longer shows the overlay when hovering over div.post-img

Any ideas on where I'm going wrong?

Answer 1

In your hover() "exit" function, you're setting opacity, etc. directly on the elements:

$overlay.css({
  // ...
  "opacity": "0"
});

Once set, these very-specific styles override anything in the CSS, including your :hover styles.

Instead, create a class that shares the same styles as :hover, and just add/remove that class when the link is hovered. This also spares you having to keep the jQuery and CSS styles in sync.

$(document).ready(function() {
  $('#srch-term').click(function() {
    if ($('#search-builder').is(":hidden")) {
      $("#search-builder").slideDown("fast");
    } else {
      $("#search-builder").slideUp("fast");
    }
  });
  
  $('.read-more').hover(
    function() {
      $img = $(this).closest('div').find('.post-img');
      $overlay = $(this).closest('div').find('.overlay');
      $img.addClass('hovered');
      $overlay.addClass('hovered');
    },
    function() {
      $img = $(this).closest('div').find('.post-img');
      $overlay = $(this).closest('div').find('.overlay');
      $img.removeClass('hovered');
      $overlay.removeClass('hovered');
    });
});

.post-img {
  height: 300px;
  width: 100%;
  background-size: cover;
  transition: opacity 200ms ease-out;
  -webkit-transition: opacity 200ms ease-out;
  -moz-transition: opacity 200ms ease-out;
  -o-transition: opacity 200ms ease-out;
}

.post-img:hover, .post-img.hovered {
  opacity: 0.5;
}

span.overlay {
  background-color: #f39300;
  cursor: pointer;
  height: 300px;
  width: 585px;
  position: absolute;
  left: 0;
  z-index: 10;
  opacity: 0;
}

span.overlay:hover, .overlay.hovered {
  opacity: .5;
  transition: opacity 200ms ease-in;
  -webkit-transition: opacity 200ms ease-in;
  -moz-transition: opacity 200ms ease-in;
  -o-transition: opacity 200ms ease-in;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="post-box">
  <a href='#'>
    <span class='overlay'></span>
    <div class='post-img' style="background-image:url('http://placehold.it/200');"></div>
  </a>
  <a class='post-title' href="#">Title</a>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <a class='read-more' href="#">Read more</a>
</div>