Web Development: Unraveling HTML, CSS, and JavaScript/

...

/

How It Works: Defining Visual Behavior with CSS

How It Works: Defining Visual Behavior with CSS

In this lesson, we'll understand how to define visual behavior with CSS from the previous exercise.

We'll cover the following...

How it works

The hover is a “pseudo-class” in CSS. The h1:hover style represents the visual settings that should be applied when the mouse is over a first-level heading. As soon as the mouse leaves the heading, the original style is restored. That is how the colors changed when you displayed the web page in step 3.

h1:hover {
    color: #61b3e7;
    background-color: #e6e8fa;
    transition: all 500ms ease-in-out;
}

In step 4, you added the transition ...