Flash cards
Review the key moves
What is the main idea behind CSS Interactive Pseudo-classes?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
/* ___ link */Put the learning moves in the order that makes the concept easiest to apply.
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
/* 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;
}Live preview
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:
Example
div:hover {
background-color: blue;
}Live preview
:focus on <input>
Here is an example of using the :focus pseudo-class to style an input field when it gets focus:
Example
input:focus {
background-color: yellow;
}Live preview
Pseudo-classes and HTML Classes
Pseudo-classes can easily be combined with HTML classes:
Example
a.highlight:hover {
color: #ff0000;
}Live preview
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;
}Live preview