Change Text Color on Hover

What does this code do?

This code snippet will allow you to change the color when a visitor hovers overtop the text.

Code Snippets

Copy and paste this code into Design > Custom CSS

/* Change Text on Hover Site Wide */
h1:hover {
  color: red;
}

/* Change Specific Text on Hover */
SELECTOR h1:hover {
  color: red;
}

Then change the word SELECTOR to one of the selectors below.

Squarespace 7.0

/* One Page */
#COLLECTIONID

/* The Whole Footer */
footer

/* The Top Footer Section */
.Footer-blocks--top

/* The Middle Footer Section */
.Footer-blocks--middle

/* The Bottom Footer Section */
.Footer-blocks--bottom

/* One Section */
#PAGEID

/* One Text Block */
#BLOCKID

Squarespace 7.1

/* One Page */
#COLLECTIONID

/* The Whole Footer */
#footer-sections

/* One Section */
#COLLECTIONID #page .page-section:nth-of-type(1)

/* One Text Block */
#BLOCKID

To target one sentence or one word, it may be easiest to use a code block.

Copy and paste the following within a code block.

<!--To target one sentence -->
<div class = "CLASSNAME">
  <h1>TEXT GOES HERE.</h1>
</div>

<!--To target one word -->
<div>
  <h1>TEXT <span class="CLASSNAME">GOES</span>HERE.</h1>
</div>

Then copy and paste this code into Design > Custom CSS

/*To target one sentence */
.CLASSNAME h1:hover{
  color: red;
}

/*To target one word */
.CLASSNAME:hover{
  color: red;
}

How To Use It

1. Copy and paste the code as indicated above.

2. Choose the selector that matches your situation.

3. To learn how to find a collection id, page id, or block id check out our Start Here guide.

4. If targeting one section in Squarespace 7.1, change the 1 to match the section you are trying to change.

5. If targeting one sentence or one word, change the word CLASSNAME to an appropriate name such as redtext.

6. Change h1 to target the type of text you want to change.

   • h1 = Heading 1

   • h2 = Heading 2

   • h3 = Heading 3

   • h4 = Heading 4

   • p = Body Text (all paragraphs; there is no p1, p2, p3 etc.)

   • a = Link

7. You can use a word, rgb, or hex code for the color.