CSSInteractive 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:
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
Note:a:hover MUST come aftera:link anda:visited in the CSS definition in order to be effective!a:active MUST come aftera: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":
color: #ff0000;
}
Simple Tooltip Hover
Hover over a <div> element to show a <p> element (like a tooltip):
Tada! Here I am!
Example
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
