Jump to content

Custom hover over colour of social links

Go to solution Solved by MAC1,

Recommended Posts

Hi,

been searching for code to target the social links icons  to hover over with a custom colour 
I want the social links to hover over as blue
only got this far with the code, im not great at coding though. cant find the right class id 

/* Change color for all social icons on hover */
.social-icon:hover {
    color: #43c6ff; /* Replace with your desired hover color */
}

web: https://ellipse-teal-dl5w.squarespace.com/
pass: 2

Cheers

Link to comment

Try this instead:

.header-actions .icon--fill svg {
  transition:ease-in-out 300ms;
  &:hover {
    color:#43c6ff;
  }
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Add this:

.social-icons-color-black.social-icons-style-knockout .sqs-use--mask {
  transition:ease-in-out 300ms;
  &:hover {
    color:#43c6ff !important;
  }
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

I got the mobile header social hover working with this code:

//social icons hover mobile header
.header--menu-open .header-menu .icon svg {
  transition:ease-in-out 300ms;
  &:hover {
    color:#43c6ff;
  }
}

but the footer social icons are more tricky
I'm inspecting the elements but can't work it out to target the footer social icons
this is how far i got:
 

#footer-sections .sqs-svg-icon--wrapper  {
  transition:ease-in-out 300ms;
  &:hover {
    color:#43c6ff;
  }
  
}

what's wrong with the footer code here?

Cheers


 

Link to comment
  • Solution

solved!
1. Change footer social icons "hover color":

//footer social icon hover
.sqs-svg-icon--list {
  a:hover .sqs-use--icon {
        fill: #43c6ff !important;
    }
} 

Hope this helps someone:

2. Change header social icons "hover color":  Thanks to @Ziggy 

//social icons hover header
.header-actions .icon--fill svg {
  transition:ease-in-out 300ms;
  &:hover {
    color:#43c6ff;
  }
}


3. Change mobile header social icons "hover color"
 

//social icons hover mobile header
.header--menu-open .header-menu .icon svg {
  transition:ease-in-out 300ms;
  &:hover {
    color:#43c6ff;
  }
}

 

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.