Jump to content

How to Change Clickable Text Appearance When Mouse Hovers Over?

Go to solution Solved by abibacon,

Recommended Posts


Here's link to my website: qzhuphoto.com

At this moment when mouse hovers over buttons nothing happens. I'd like to change the color to grey on those clickable text and/or icons ("Works", "About", and Instagram and Email icon from menu bar, and "All", "Architecture", "Interior", "Workspace", etc. from the category tree in "Works" page) when  mouse hovers over. 

I've tried a few code lines of editing buttons but couldn't figure out. Can anyone demonstrate? Many thanks!


Edited by qingyanzhu
Link to comment
  • Replies 2
  • Views 212
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

Hey @qingyanzhu, try the below CSS

.header-nav-item a:hover {

color: green !important;


.nested-category-tree-wrapper .category-item a:hover {

color: green !important;


.header-actions .header-actions-action--social a:hover {

color: green !important;



Squarespace Developer based in Hampshire, England

If you'd like to make a contribution for my time you can 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.