Jump to content

Change background colour on hover

Recommended Posts

Add the following to Design > Custom CSS.

#block-yui_3_17_2_1_1609164101016_6399 .summary-title-link:hover {

  background-color: red;
  padding: 10px;
  
  }

You can adjust the color and padding to suit.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 4 months later...
On 5/4/2021 at 5:14 AM, oldegray said:

was this ever figured out?

Creedon sent above code. If you haven't solve this yet, can you share link to your site? We can help easier

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
  • 2 weeks later...
23 hours ago, oldegray said:

What do I need to target to have the entire background change color on hover? Ideally I will have several areas on the website where then background changes on hovering over photos and other links.  Here is the website I'm trying to target.

https://cyan-gold-cmmp.squarespace.com/ahoy-mates/#/missoula-montana-river-floating

It looks like you solved?

image.thumb.png.e816b1d4ac4e5ea7df6ee62c54e7fb3d.png

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
  • 5 months later...

@Anele0610

Add the following to Websites > Website Tools ( scroll to the bottom of the panel ) > Custom CSS.

[data-section-id="[enter data section id here between double quotes replacing square brackets]"]:not( .has-background ):hover .section-background {

  background-color : red;
  
  }

This is for v7.1.

Use Heather Tovey's most excellent looking Squarespace ID Finder to get the data section id.

SIF will return something like the following. section[data-section-id="614b8ba6cbf4aa0de33419f4"]. You only need to enter the number between double quotes in the code above.

Let us know how it goes.

Edited by creedon
version 3

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.