Jump to content

CSS Code for image rollover no longer working

Go to solution Solved by tuanphan,

Recommended Posts

Our company website was built by our external team a few years ago and has been working fine but recently the image rollover effect we had in our portfolio is no longer working. I've double checked the CSS code and inserts but can't see anything visibly wrong and it wouldn't make sense for it to randomly stop working! 

The code injection for this bit is here: 

      //image rollover

      $('.sqs-block-image p:contains(rollover)').parents('.sqs-block-image').addClass('rollover').prev().addClass('original');

      $('.original').mouseover(function(){

        var url = $(this).next().find('img').attr('data-src');

        $(this).find('img').attr('src', url);

      })

      $('.original').mouseout(function(){

        var url = $(this).find('img').attr('data-src');

        $(this).find('img').attr('src', url);

      })

      //end of your code

    }

 

And this is the custom CSS: 

  //image rollover effect
  .rollover {
    display: none !important
  }
  body:not(.sqs-edit-mode-active) {
    .rollover {
      display: block
    }

 

Would anyone have any idea why this would randomly stop working? 

 

Link to comment
  • Replies 6
  • Views 945
  • Created
  • Last Reply

Top Posters In This Topic

2 hours ago, tuanphan said:

Thank you.

What should effect look like? If you describe it, we can check easier

Basically, when you roll over the image, it shows another image as a rollover effect.  I've included a snip below. The blue block that says "show homes" is the one that shows up when you rollover the black and white image. To make it work, you need to type "rollover" on the lower image. 

Rollover set.PNG

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.