CSS Interactive Pseudo-classes
Interactive Pseudo-classes
Interactive pseudo-classes apply styles based on user interaction with elements.
Here we use the :hover pseudo-class and the
:focus pseudo-class:
Mouse Over Me
Pseudo-classes Used on Links
For HTML links, it is common to use the following pseudo-classes:
:link- Styles unvisited links:visited- Styles visited links:hover- Styles a link on mouse over:active- Styles an activated link
Example
Display links in different colors depending on state:
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited
link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
Try it Yourself »
Note: a:hover MUST come after a:link and
a:visited in the CSS definition in order to be effective! a:active MUST come after
a:hover in the CSS definition in order to be effective!
Pseudo-class names are not case-sensitive.
:hover on <div>
Here is an example of using the
:hover pseudo-class on a <div> element:
:focus on <input>
Here is an example of using the
:focus pseudo-class to style an input field when it gets focus:
Pseudo-classes and HTML Classes
Pseudo-classes can easily be combined with HTML classes:
Example
Add a :hover pseudo-class to the <a> element with class "highlight":
a.highlight:hover {
color: #ff0000;
}
Try it Yourself »
Simple Tooltip Hover
Hover over a <div> element to show a <p> element (like a tooltip):
Tada! Here I am!
Example
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
Try it Yourself »
