asp.net.ph

Skip Navigation Links

hover Pseudo-class

CSS Attributes Index   Pseudo-class Attributes


Sets the style of the anchor when the user's mouse hovers over the links.

Syntax


CSS [ A ] :hover { attribute1:parameter1 [ ; attribute2:parameter2 [ ; . . . ] ] }
Script N/A

Possible Values


attribute Any attribute applicable to text.
parameter Any of the range of values available to the corresponding attribute.

The default value is browser-specific.

Remarks

Hover means that the user has the mouse positioned over the link and has hesitated. The style will not change if the mouse is simply passed over the link. Setting the hover pseudo-class is often used in conjunction with setting specific styles for the other states of a link: active, link, and visited.

Using pseudo-classes on objects other than the A object has no effect.

Example

The following demonstrates use of the a:hover attribute in an embedded stylesheet to set the color of hyperlinks on a page when the mouse pointer moves over the links.

<style type="text/css">
   a:link {
      font-weight: bold; color: #8be }
   a:visited {
      color: #eb8 }
   a:active {
      background-color: #eec; color: #500 }
   a:hover {
      color: #bc7; text-decoration: none;
      font-variant: small-caps }
-->
</style>

This feature requires Microsoft® Internet Explorer® 4.0 or later.

 Show me 

Note the syntax in the example above uses only a colon ( : ) to specify the hover pseudo-class. If the hover property is to apply only to default anchor elements, the A before :hover is optional.

The CSS :hover attribute can also be used for contextual hyperlinks, or links which are contained within other selectors. For instance:

dt a:hover {
   font: bold small-caps; background: sienna; color: khaki }
.showme a:hover {
   background: maroon; color: yellow;
   text-transform: uppercase }

That declaration will apply the style to all links within a definition term ( DT ) element, as well as to elements whose class attribute is set to showme. And in case you have not noticed, those :hover styles are actually what are used throughout this site.

Applies To

A

See Also

active, link, visited



© 2025 Reynald Nuñez and asp.net.ph. All rights reserved.

If you have any question, comment or suggestion
about this site, please send us a note