Some items are already hovered over on page load. Any way to fix this?

[imgrooot]

I have this jquery code below.  It basically shows a new div when mouse hover over another div.  It works. But I noticed that on page load, it sometimes shows 1 or 2 products already hovered and showing the ".show-details" content.  This doesn't happen on every page and sometimes it's only 1 product and sometimes it's 2 products. And they vary in the positions on a page.  Do you know why it's doing that and how to fix it?  By the way, I have ".show-details" set to display: none by default in the CSS file.

<script>
  $(document).ready(function() {
    $(".product-small").hover(function() {
      $(this).find('.show-details').fadeIn("fast").css({ display: 'block'});
    }, function(){
        $(this).find('.show-details').fadeOut("fast").css({ display: 'block'});
    });
  });
</script>

Edited August 24, 2016 by imgrooot

[.josh]

You can try adding something like this. I've seen it more or less work as a bandaid for some:

$(document.ready(function() {
  $('.product-small .show-details').hide();
});

I don't really have an explanation why it happens though. 

[imgrooot]

You can try adding something like this. I've seen it more or less work as a bandaid for some:

$(document.ready(function() {
  $('.product-small .show-details').hide();
});

I don't really have an explanation why it happens though. 

 

It seems to do the trick.  Thanks a bunch!