How to Create Rollover Text
Rollover text effects cause the look of hyperlinked text to change when the mouse cursor moves over it, called the hover state. Although there's no default hover state, you can use CSS to include this state and set the attributes.
Other People Are Reading
-
Hyperlink Styles
-
Hyperlinks have default attributes for color of new and visited links states, and use the website's default or preset font. Use CSS (cascading style sheets) to change all or some of these attributes once, to override the automatic attributes throughout your website.
Rollover Text
-
Locate the CSS area in your current HTML file or open your separate CSS file. Add in the a:link and a:visited pseudo classes first, for the default states. For each state, select the attributes to change, like font-family, font-size, font-weight, text-decoration, and color. Then add the pseudo class a:hover to include the rollover state and set the attributes.
-
Dramatic Changes
-
Use big changes to see how it works. Add the following code- a:hover {color: #527A00; font-size: 24px; text-transform: uppercase; font-weight: bold; text-decoration: underline;}. Save the changed files then refresh your Web page to see what happens. Now, when you roll over the linked text, you'll see the attributes above yield big green text that shifts lines around the page temporarily. The text should be capitalized and bold with underline when you roll over it. It reverts to the normal new or visited states when you move away from it.
Considerations
-
Use the codes to get links noticed without disorienting your readers. Try changing just the color and include the underline text-decoration in the hover state only. A lot of big changes will distract from the surrounding page content, especially when used on inline links.
-
