Website Building » Squarespace » How Do I Make Text Appear on Hover Squarespace?

How Do I Make Text Appear on Hover Squarespace?

Last updated on December 30, 2022 @ 5:45 pm

If you want to style text on your Squarespace website, you have a few different options. You can use the <b> bold tag, the <u> underline tag, or the <p> tag to add emphasis to your text.

If you want to make text appear on hover squares, you can use the :hover pseudo-class. This will make any text that is styled with this class appear when the mouse cursor is over the element. To do this, simply add the following CSS to your site:

.hover-text {
visibility: hidden;
}

.hover-text:hover {
visibility: visible;
}

You can then use this class on any element on your site, and the text will only be visible when the mouse is over it. This is a great way to add interactivity to your site without having to use JavaScript.

PRO TIP: When hovering over squares in Squarespace, be careful not to accidently click and delete text or images. Also, be aware that changes you make in the hover state may not be reflected in the published version of your site.
Drew Clemente

Drew Clemente

Devops & Sysadmin engineer. I basically build infrastructure online.