Abakada: Back to Basics > Language References > CSS Properties > Pseudo-Classes > hover Pseudo-class
Sets the style of a hyperlink element when a user moves the mouse over it.
selector:hover { property: value; }
| property |
Any valid CSS property. |
| value |
Any of the range of values available to the corresponding property. |
The :hover pseudo-class applies styles to a hyperlink element when the user interacts with it using a pointing device, such as a mouse, but does not necessarily activate it.
The style(s) are applied when the mouse is positioned over the link but the user has not clicked on the link.
The syntax for using the :hover pseudo-class is straightforward. A selector immediately precedes the pseudo-class.
For example, to change the color of an anchor ( <a>) element when the user hovers over it:
a:hover { color: #500 }
Setting :hover is often used in conjunction with setting styles for other states of a hyperlink: :link, :visited, and :active.
a:link, a:visited {
color: #005 }
a:active {
background-color: palegoldenrod; color: #500 }
a:hover {
color: #500 }
The above shows how anchor elements are styled in this workshop.
:hover is not limited to anchor elements. It can be used on any element that can be configured as a hyperlink, including:
- <button> elements
- <img> elements
- <input> elements whose type attributes are buttons
- <area> elements that has an href attribute
button:hover {
background-color: maroon; color: gold; font-weight: 600;
border-radius: 6px; padding: 1px 10px;
}
The above shows how button elements are styled for the demos in this workshop.
In addition, :hover can apply to form controls associated with a label element, and to any element that contains a hovered element.
The below shows an <a> tag wrapped in a <p> element, and styled to look like a button, as used in many instances in this workshop.
/* HTML */
<p class="showme"><a href="someDemo.aspx" title="Click here to see a demo.">
<img src="/shared/cool.gif" width=15 height=15 align="absmiddle"> Show me </a></p>
/* CSS */
.showme a:link, .showme a:visited {
font: bold 11pt arial; background: navy; color: lime;
text-decoration: none; padding: 8px; border-radius: 12px }
.showme a:hover {
background: maroon; color: yellow;
text-transform: uppercase }
.showme a:active {
background: darkslategray; color: khaki }
Show me
Below are two examples of using :hover to emphasize <img> elements that are configured as hyperlinks.
Notice also the use of a simple transition to better visualize the effect.
And here is a real-world example that employs this concept extensively. Hover over the image hyperlinks to see.
:active :focus :link :target :visited