different colour when hovering over links

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!

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;
   }
}

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!

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;
   }
}