Jump to content

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


imgrooot

Recommended Posts

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>
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.