Jump to content

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


Go to solution Solved by .josh,

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.

  $(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'});
Edited by imgrooot
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

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • 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.