Jump to content

Background Color Change on Hover

Recommended Posts

Site URL: https://olgadelaiglesia.net/


I'm new to using HTML and Javascript in SS, typically I just use CSS.

I'm trying to learn how to change the background-color of a page on hover over a link, and I'd love to be able to do the same for hovering over an image, like in the example.

Currently, on my FV website, I have an image appearing on hover.

I used a Markdown for the following HTML:

<div class="titles"><a href="/films/velour">Velour</a></div>

<div class="titles1"><a href="/films/parallel">Parallel</a></div>

<div class="titles2"><a href="/films/comply">Comply</a></div>

<div class="titles3"><a href="/films/in-development">In Development</a></div>

I used a @keyframes code that I pasted in my css, and it's working well.

I would love to learn how to add a background color hover in addition to the image. The code below is what I was trying to use, however it isn't working. I tried putting the Javascript in both the individual page's <head> tag, and the code injection's header tag and then tried the footer tag, adding the <script> </script> tags before and after. 


If anyone knows an easier way to do this, I'm up for learning how to add the correct HTML and Javascript.

Thank you!






Link to comment
  • 5 months later...
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

On 2/4/2021 at 5:32 AM, oldegray said:

Hello! Have you figured this out?


If you use  SS 7.1, you can use Portfolio Page to achieve this.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.