acbrent25
9/2/2017 - 11:57 AM

CSS Pseudo-Classes Demo: a, hover, focus, active

CSS Pseudo-Classes Demo: a, hover, focus, active

/**
 * CSS Pseudo-Classes Demo
 **/

/* Normal Element Rule */
a {
  font-size: 64px;
}

/* Hover Pseudo Class:
    Changes the style only when mouse hovers
    over the preceding element.
*/
a:hover {
  background-color: red;
}

/* Focus Pseudo Class
    Changes the style only when browser
    gives the element focus
    (in this case, after the link is clicked).
*/
a:focus {
  background-color: orange;
}

/* Active Pseudo Class
    Changes the style only while the user
    clicks down on an element. This style ceases
    when the user releases their click.
*/
a:active {
  background-color: black;
}