Loading lesson path
Formula
Interactive pseudo - classes apply styles based on user interaction with elements.Formula
:hover pseudo - class and the
:focus pseudo - class:Formula
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
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;
}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!
Formula
Pseudo - class names are not case - sensitive.
:hover on < div >Formula
:hover pseudo - class on a < div > element:Example div:hover {
background-color: blue;
}Formula
:focus on < input >Formula
:focus pseudo - class to style an input field when it gets focus:Example input:focus {
background-color: yellow;
}Formula
Pseudo - classes can easily be combined with HTML classes:Formula
Add a :hover pseudo - class to the < a > element with class "highlight":a.highlight:hover {
color: #ff0000;
}Formula
Hover over a < div > element to show a < p > element (like a tooltip):
Hover over me to show the < p > element.Tada! Here I am!
Example p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}