Change of linked text on hover in 7.1

Site URL: https://orange-beagle-9jfc.squarespace.com/

Good morning to you all,

I'm a newbie to Squarespace and I'm sorry if this question has been asked before or if the answers can be found in this forum already - I couldn't find it.

I'd like to have linked text or headings in the text to change colour on hover. The default in 7.1 seems to be that the links are underlined. I've managed to get rid of the underline but couldn't manage to change colour.

Does anyone know how I can fix this? Thanks in advance for your consideration!

Matt

15 hours ago, Matt_Steinke said:

Site URL: https://orange-beagle-9jfc.squarespace.com/

Good morning to you all,

I'm a newbie to Squarespace and I'm sorry if this question has been asked before or if the answers can be found in this forum already - I couldn't find it.

I'd like to have linked text or headings in the text to change colour on hover. The default in 7.1 seems to be that the links are underlined. I've managed to get rid of the underline but couldn't manage to change colour.

Does anyone know how I can fix this? Thanks in advance for your consideration!

Matt

I saw your already get it solved right?

Hi bangank36,

unfortunately I haven't. The navigation wasn't the issue, it's about links in the body copy on the page. Any suggestions will be highly appreciated 😉

21 hours ago, Matt_Steinke said:

Hi bangank36,

unfortunately I haven't. The navigation wasn't the issue, it's about links in the body copy on the page. Any suggestions will be highly appreciated 😉

All the link on your body is turn to semi transparent on hover, could you show the one with underline on hover?

I already got rid of the underline. Instead of semi transparent on hover I'd like the links to turn red. Does this make sense?

7 hours ago, Matt_Steinke said:

I already got rid of the underline. Instead of semi transparent on hover I'd like the links to turn red. Does this make sense?

Your site is private now, guess you got it solve?

use iron-curtain to get in 😉

On 1/25/2021 at 9:06 AM, Matt_Steinke said:

use iron-curtain to get in 😉

Add to Design > Custom CSS

/* link hover color */
#page a:hover {
    color: violet;
}

Thanks tuanphan! That's great help!

I've also used your code to apply a color to links in the body text of my site as well and it worked great (thank you!)  Can you possibly tell me how I would get it to apply to links in my footer as well? (7.1 site also)

Edit/Update - I played around with the code a bit more and figured it out.  Adding it here in case it helps anyone. 

/* link hover color in footer */

footer a:hover {
    color: violet !important;
}

(using any color or #color code where violet is of course)

I do have another question, however - when I applied the above code (for the link text, not the footer) - it also applies it to buttons that I have style already to change on hover via site styles.  I don't wish for these to change, as I like the way they appear now.  How can I make it not apply to the buttons (button links) on my site?  Thanks for any help you can provide!

For additional info - i have my text hover color set to this:

/* link hover color */
#page a:hover {
    color: #CDD87C;
}

and my buttons also go from an outline and text in the above color, to when i hover on them the full button turns this color and text turns white.  Now with the above text hover code applied my text is not turning white (or turning back to CDD87C - which is the same color as the button - so it all just appears as a solid button with no text to the eye.  (hope that makes sense.   (site is not live yet - can view here with l2siteview (first character is a lower case "L")

you can see action of both types of this applying on the ABOUT page  - links on left near top and button near bottom above footer.

https://plane-bugle-a8ne.squarespace.com/

8 hours ago, kbrown said:

I do have another question, however - when I applied the above code (for the link text, not the footer) - it also applies it to buttons that I have style already to change on hover via site styles.  I don't wish for these to change, as I like the way they appear now.  How can I make it not apply to the buttons (button links) on my site?  Thanks for any help you can provide!

For additional info - i have my text hover color set to this:

/* link hover color */
#page a:hover {
    color: #CDD87C;
}

and my buttons also go from an outline and text in the above color, to when i hover on them the full button turns this color and text turns white.  Now with the above text hover code applied my text is not turning white (or turning back to CDD87C - which is the same color as the button - so it all just appears as a solid button with no text to the eye.  (hope that makes sense.   (site is not live yet - can view here with l2siteview (first character is a lower case "L")

you can see action of both types of this applying on the ABOUT page  - links on left near top and button near bottom above footer.

https://plane-bugle-a8ne.squarespace.com/

Try changing to this

/* link hover color */
#page .html-block a:hover {
    color: #CDD87C;
}

This worked perfectly.  Thank you tuanphan!

Hi Matt_Steinke - how did you get rid of the underline on your links in body copy and the footer? Thanks.

On 3/19/2023 at 12:03 AM, A_Childs said:

Hi Matt_Steinke - how did you get rid of the underline on your links in body copy and the footer? Thanks.

You can add this to Design > Custom CSS

div.html-block a, div.html-block a * {
	text-decoration: none !important;
	background-image: none !important;
	border: none !important;
}

Hello! Having trouble with the hover on links. I would like to have all links sitewide change yellow on hover. I have tried some of the code from this thread with no success. Any help would be greatly appreciated.

website: https://bto-2023-v2.squarespace.com/ PW: BTOv2

code tried:

/* link hover color */
#page a:hover {
    color: violet;
}

/* link hover color in footer */

footer a:hover {
    color: violet !important;
}

8 hours ago, hansworks said:

Hello! Having trouble with the hover on links. I would like to have all links sitewide change yellow on hover. I have tried some of the code from this thread with no success. Any help would be greatly appreciated.

website: https://bto-2023-v2.squarespace.com/ PW: BTOv2

code tried:

/* link hover color */
#page a:hover {
    color: violet;
}

/* link hover color in footer */

footer a:hover {
    color: violet !important;
}

Use this code

a:hover, a:hover * {
    color: violet;
}