Jump to content

Background Color Change on Hover

Recommended Posts

Site URL: https://olgadelaiglesia.net/

Hi,

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. 

https://codepen.io/OceanSquad/pen/KZxmmG

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

Thank you!

 

 

 

FV-image-on-hover.gif.f125bb43ac5b088ec29c7d279e96c63a.gifinspo-background-color-hover.gif.c308d77f919385ee709c7e9b7386ccac.gif

 

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

Archived

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

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