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;
}

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;
}

: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;
}

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;
}

Simple Tooltip Hover

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;
}