Jump to content

Change of linked text on hover in 7.1

Recommended Posts

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

Link to comment
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?

image.thumb.png.eb184f5fa9e8b8f4558e817aeb90b908.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 year later...

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)

Link to comment

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/

Edited by kbrown
misspelling
Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 weeks later...

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.