CSS Interactive

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

<input class="focus" type="text" name="fname" autocomplete="off" placeholder="Click Me To Get Focus">

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

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

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