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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.