Jump to content

different colour when hovering over links

Recommended Posts

Site URL: http://www.scrypth.com

hi,
i'm trying to find a way to inject code to target groups of links on one page to change colour on hover; specifically, i want all the links in each block (first quarter, second quarter, etc) to change to a specific colour, but for these to be different from the other blocks. is this possible to do? all help very appreciated!

 

Screen Shot 2022-03-12 at 19.54.15.png

Edited by vbt
to specify issue
Link to comment

Hello! To achieve this, you will need to use the "data-section-id" attribute to specify a color for each block. For example, here is a code block that will make the light quarter sections one color, and the dark quarter sections another. Copy & Paste this into Design > Custom CSS. 

/* Hover affects for dark sections */
[data-section-id="6208dd89d0bc844e29178745"], [data-section-id="6208dd89d0bc844e29178749"] {
   a:hover {
    color: red !important;
   }
}

/* Hover affects for light sections */
[data-section-id="6208dd89d0bc844e29178747"], [data-section-id="6208ddae6d10ea045a8c61bf"] {
   a:hover {
    color: orange !important;
   }
}

 

Link to comment

thank you caroline! really appreciate the answer. 

is there any way to select dark 1 and dark 2 separately with the data-section-id, if i wanted a three separate colours, as opposed to two?

thanks again!

 

Link to comment
1 minute ago, vbt said:

thank you caroline! really appreciate the answer. 

is there any way to select dark 1 and dark 2 separately with the data-section-id, if i wanted a three separate colours, as opposed to two?

thanks again!

 

Yes, there is actually a much easier way to accomplish that without using the "data-section-id" attribute - I just assumed you only wanted those particular blocks to have the hover affects, but since those are the only four blocks on the page, I think this solution will work better for you. I just went ahead and laid out all of the different page section color theme selectors so that you can pick which ones to use. See the attached picture for a map of Squarespace color themes to CSS selectors

 

/* Hover affects for white 1 sections */
.white {
   a:hover {
    color: red !important;
   }
}

/* Hover affects for white 2 sections */
.white-bold {
   a:hover {
    color: red !important;
   }
}

/* Hover affects for light 1 sections */
.light {
   a:hover {
    color: red !important;
   }
}

/* Hover affects for light 2 sections */
.light-bold {
   a:hover {
    color: red !important;
   }
}


/* Hover affects for bright sections */
.bright {
   a:hover {
    color: red !important;
   }
}

/* Hover affects for bright inverse sections */
.bright-inverse {
   a:hover {
    color: red !important;
   }
}

/* Hover affects for dark 1 sections */
.dark {
   a:hover {
    color: red !important;
   }
}

/* Hover affects for dark 2 sections */
.dark-bold {
   a:hover {
    color: red !important;
   }
}

/* Hover affects for black 1 sections */
.black {
   a:hover {
    color: red !important;
   }
}

/* Hover affects for black 2 sections */
.black-bold {
   a:hover {
    color: red !important;
   }
}

 

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