Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Define CSS Rollover Effects

Use the :hover, :active, and :visited pseudo-classes to create CSS mouse rollover effects. Pseudo-classes are used to control properties of html elements that are not available in the document tree. For example, there is no property that related to an html link have been visited.

Although the CSS specification supports in-line coding of the rollover effects pseudo-classes, Internet Explorer does not. They will work only if you code them inside a script block as shown below.

<style type="text/css">
a:link {color: yellow}
a:visited {color: green}
a:hover {color: blue}
a:active {color: red}

The :link pseudo-class defines the style for links that have not yet been visited.
The :hover pseudo-class defines the style while the user has the mouse pointer over the link.
The :visited pseudo-class defines the style after the link has been visited.
The :active pseudo-class defines the style while the user has the mouse pointer over the link between the time the user presses the mouse button and the time the user releases the mouse button.

In order to work, :hover must come after ;link and ;visited in the definition.
In order to work, :active must come after :hover in the definition.

Generally, you would place your script block inside the Head section of your webpage, but technically it will work as long as its in the code before the element to which it applies. If you wanted to do something similar to in-line coding, you could place a script block defining a specific class just before the link to which you wanted it to apply. That way, you could code a different rollover effect for each link in a webpage, and keep the style definitions just above each link, as shown below.

<style type="text/css">
a.first:link {color: yellow}
a.first:visited {color: green}
a.first:hover {color: blue}
a.first:active {color: red}

<a class="first" href="http://bucarotechelp.com">Link Text</a>

<style type="text/css">
a.second:link {color: red}
a.second:visited {color: blue}
a.second:hover {color: green}
a.second:active {color: yellow}

<a class="second" href="http://bucarotechelp.com">Link Text</a>

Link Text

Link Text

These examples demonstrate how to add color rollover effects, of course you can apply other effects as well.

If you still want to apply inline style rollover effects, the technique shown below is about as close as you can get at the current time. Technically, it uses Java Script to apply style to the link's events.

<a onmouseover="this.style.color='gray';"
href="http://bucarotechelp.com">Link Text</a>

Link Text

These examples define colors using their names, of course, you can also use hexadecimal color notation.

More CSS Quick Reference:
• Set the Text Alignment
• Set an Element's Display Property
• Use an Embedded Style Sheet
• CSS background-clip Property
• Set Text Justification
• Set an Element's Visibility
• nth-child Selector
• Use Image for List Item Bullets
• Set an Element's Float
• Use Inline Style

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2018 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268