Hover States for Footer Links in 7.1

Does anyone know how to make footer links display a different hover state (color)? I’ve already disabled the underline with this code:

footer .sqs-block-html a {
  background-image: none !important;
  background-repeat: no-repeat !important;
  text-decoration: none !important;
}

Now I’d like to have the hover state display in a different color. Can’t seem to find anything online and what I do find doesn’t work. I’m just a designer don’t know much about code other than where to put it in 7.1. 

Add to Design > Custom CSS

/* footer links hover color */
footer.sections a:hover {
	color: red !important;
}

On 5/16/2021 at 4:49 AM, tuanphan said:

Add to Design > Custom CSS

/* footer links hover color */
footer.sections a:hover {
	color: red !important;
}

 

Thank you!

Hi there @tuanphan this code does not work for me? Please help?

https://beige-oleander-mp66.squarespace.com/

14 hours ago, Iwan said:

Hi there @tuanphan this code does not work for me? Please help?

https://beige-oleander-mp66.squarespace.com/

Can you try again? I just tested & it should work

It now works, thank you 🙂

Hi @tuanphan, hope you're well? I'm trying the above code on the footer of this site:

https://deep-learning-cafe.squarespace.com/

password: password123

I need to change the hover colour for the centre menu (to blue) and the right menu (to yellow)

Can you please help?

20 hours ago, IwanJ said:

Hi @tuanphan, hope you're well? I'm trying the above code on the footer of this site:

https://deep-learning-cafe.squarespace.com/

password: password123

I need to change the hover colour for the centre menu (to blue) and the right menu (to yellow)

Can you please help?

Add to Design > Custom CSS

/* Footer links hover */
div#block-c8b8e06bb4251545263a a:hover * {
    color: #2E7B98 !important;
}
div#block-a07cc8ebb76653972a81 a:hover * {
    color: #E1AD01 !important;
}

Thank you so much @tuanphan!

Hi @tuanphan 

I'm scratching my head as to why your code is not taking effect on this site...

footer .sqs-block-html a {
  background-image: none !important;
  background-repeat: no-repeat !important;
  text-decoration: none !important;
}
/* footer links hover color */
footer.sections a:hover {
    color: red !important;}

 Please advise ~ thank you so much!

https://alicia-schooler-hugg.squarespace.com/

alicia (lowercase)

On 12/6/2022 at 3:09 PM, authenticeye said:

Hi @tuanphan 

I'm scratching my head as to why your code is not taking effect on this site...

footer .sqs-block-html a {
  background-image: none !important;
  background-repeat: no-repeat !important;
  text-decoration: none !important;
}
/* footer links hover color */
footer.sections a:hover {
    color: red !important;}

 Please advise ~ thank you so much!

https://alicia-schooler-hugg.squarespace.com/

alicia (lowercase)

Change to this code (I added span tag)

footer .sqs-block-html a {
  background-image: none !important;
  background-repeat: no-repeat !important;
  text-decoration: none !important;
}
/* footer links hover color */
footer.sections a:hover span {
    color: red !important;
}

Hi @tuanphan I'm having trouble with a footer that is linked to a folder. It does not expand to show the pages in the folder on hover like it does with the primary navigation links.

Any ideas?? 

Thanks

@tuanphan That worked! ... for that site!   Is it not a universal code?

I tried it on another website but it is not functioning.... how do I use the code for all sites with links in the footer?

This is the other site I added the code to:
https://www.michaelamcgivern.com/

Thank you for your time!

Rei

On 12/11/2022 at 7:26 PM, THESC said:

Hi @tuanphan I'm having trouble with a footer that is linked to a folder. It does not expand to show the pages in the folder on hover like it does with the primary navigation links.

Any ideas?? 

Thanks

What is your site url?

On 12/12/2022 at 1:00 PM, authenticeye said:

@tuanphan That worked! ... for that site!   Is it not a universal code?

I tried it on another website but it is not functioning.... how do I use the code for all sites with links in the footer?

This is the other site I added the code to:
https://www.michaelamcgivern.com/

Thank you for your time!

Rei

Use this CSS code

/* footer links hover color */
footer.sections a:hover {
    color: red !important;
}

@tuanphan - thank you! the footer hover code is working on the other site now.

Much appreciated ~*~

Hi @tuanphan ! I used your code for the footer of my new site and it was working perfectly, but now it isn't working on a few links only. 

Not working for footer links to:

• Wellness Templates in first column
• Design Club in third column
• Courses in third column

I've tried removing links and adding them again, removing the code and adding again, but still having this issue. Any assistance is much appreciated!! 🙏

https://www.plumcovecreative.com/

On 5/6/2024 at 7:05 AM, stephcornell said:

Hi @tuanphan ! I used your code for the footer of my new site and it was working perfectly, but now it isn't working on a few links only. 

Not working for footer links to:

• Wellness Templates in first column
• Design Club in third column
• Courses in third column

I've tried removing links and adding them again, removing the code and adding again, but still having this issue. Any assistance is much appreciated!! 🙏

https://www.plumcovecreative.com/

You can use this new code

footer.sections a:hover, footer.sections a:hover * {
    color: #bfb0b6 !important;
}

On 5/7/2024 at 4:27 AM, tuanphan said:

You can use this new code

footer.sections a:hover, footer.sections a:hover * {
    color: #bfb0b6 !important;
}

 

That worked perfectly @tuanphan!! Thank you so much!