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.
More CSS Quick Reference:
• Set the box-sizing Property
• Use word-wrap Property to allow Line Breaks in the Middle of Words
• Highlight Text
• Specifying Color
• CSS background-origin Positions Background
• Set an Element's Clipping
• position:absolute
• Set List Properties
• Set an Element's Margin
• Set an Element's Display Property
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
