Jump to content

How to change links color on hover

Go to solution Solved by Ziggy,

Recommended Posts

Hi awesome community. 
 

I have a question that I hope you can help me with. On my contact page I've created 3 hyper links or links. Does anyone know how I can change their color when someone hovers over them?
 

Thks you guys in advance. 
 

 

Link to comment

Can you share the URL and page?

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

Try adding this to Custom CSS:

#block-ee4609f2bfd661e57bcb {
  p a:hover {
    color:#ff94a6 !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
  • Solution

Try this without the p:

#block-ee4609f2bfd661e57bcb {
  a:hover {
    color:#ff94a6 !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

Strange, try this instead:

section[data-section-id="63e119a72480d26f2155fbee"] {
  a:hover {
    color:#ff94a6 !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

That's really confusing, all of them work in my testing, do you have any CSS that might be conflicting?

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

ah okay.

Here are all the CCS that i have implemented

 

header a {
background-image: none !important;
}

/* Nav item color */
.header-nav-item a {
    color: #aeaeae !important;
    transition-duration: 0.4s;
}
/* Nav item hover color */
.header-nav-item a:hover {
    color: #FF92A5 !important;
    transition-duration: 0.4s;
}
/* Nav item active color */
.header-nav-item--active a {
    color: #4a4a4a !important;
}

.header-layout-nav-right .header-nav {
    margin-right: 70px;
}

@media only screen and (min-width:768px) {
  .grid-item:nth-child(odd) {
    margin-top: 0px;
  }
  .grid-item:nth-child(even) {
    margin-top: -50px;
  }
}

.item-pagination-link:hover .item-pagination-icon svg {
  stroke: #FF92A5 !important;
}

.item-pagination-link:hover .item-pagination-title {
  color: #FF92A5 !important;
}

p.sqsrte-small a:hover {
    color: #FF92A5 !important;
}

 

Link to comment

My guess would be this is causing the problem:

p.sqsrte-small a:hover {
    color: #FF92A5 !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

Brilliant! Could you mark my post as the solution to your question, and give a thumbs up? Thanks!

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

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.