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;
}
Note:
a:hoverMUST come aftera:linkanda:visitedin the CSS definition in order to be effective!a:activeMUST come aftera:hoverin the CSS definition in order to be effective! Pseudo-class names are not case-sensitive.
:hover on
Here is an example of using the :hover pseudo-class on a
element:
Example
div:hover {
background-color: blue;
}
:focus on
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;
}
Pseudo-classes and HTML Classes
Pseudo-classes can easily be combined with HTML classes:
Example
a.highlight:hover {
color: #ff0000;
}
Simple Tooltip Hover
Hover over a
element to show a element (like a tooltip):
Tada! Here I am!
Example
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
Want to go beyond the notes?
Join CodingNow 2.0's CSS course — live mentorship, real projects, and 100% placement support.
Enroll Now — Free Demo Available
Here is an example of using the :hover pseudo-class on a
Example
div:hover {
background-color: blue;
}
:focus on
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;
}
Pseudo-classes and HTML Classes
Pseudo-classes can easily be combined with HTML classes:
Example
a.highlight:hover {
color: #ff0000;
}
Simple Tooltip Hover
Hover over a
element (like a tooltip):
Tada! Here I am!
Example
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
Want to go beyond the notes?
Join CodingNow 2.0's CSS course — live mentorship, real projects, and 100% placement support.
Enroll Now — Free Demo AvailableInteractive – FAQs
Quick answers about learning Interactive in CSS.
