Define CSS Rollover Effects

By Stephen Bucaro

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}
</style>

 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}
</style>

<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}
</style>

<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';"
onmouseout="this.style.color='black';" 
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.

 General Web Design
 HTML Design
 Graphics Design
 CSS Quick Reference
 Easy Cascading Style Sheets
 Java Script Quick Reference
 Easy Java Script Code
 Web Design Tools
 Coding Issues
 FREE Graphics Warehouse

RSS Feed