css CSS Pseudo-Classes演示：a，悬停，焦点，活动

Posted 2021-05-13

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