Let's continue the pseudo classes.
In the previous video we talked about impute pseudo classes in this video.
Let's focus on user action.
Pseudo classes.
Back to my HTML.
Now I can remove the one that I'm done with it or I can comment it out as that comment this one.
And now I have what is called impute to the classes.
Let me copy the text.
Come down here and comment and then let me put it here as.
As that.
Now, it's not going to be as user action pseudo classes.
So before we can try it out, let's add a button called Register.
Good.
So for this button here, the default states.
We have a background of gray.
So if I click or if I move my amount on end, I want to add a different CSS to it.
So the first one is what you call the Hoover.
When I say Hoover, it matches.
When a user designates an item with pointing device such as holding the mouse, pointing over the item.
So like this one, you see that if I move my mouse on that, that's what's called Hoover Effect or Hoover
action.
So if I move my mouse on the button, I want to change the class.
So back to my case here.
Now I can comment this one and let's start with the user action.
So I will select the element and then semicolon when on Hoover as that.
So on Hoover changed the background color to let's say red and have a look.
As soon as I move my mouse on it, see that I have it as that.
But when I move my mouse I won't change the cursor.
So let's say pointer to have some nice feeling.
So cursor as pointer in this way we see that my cursor is not like a hand pointer pointing to my button
as that.
So on Hoover.
On Hoover I can change any property like background and I can also change the color on the text.
So let's say color of A to be white.
Now have a look.
Yes.
And I can change the weight of the pattern to, let's say, 500 pixels.
And now have a look.
You see that now on Hoover I'm changing the weight of the button has that that is what you call the
Hoover and the next one is what we call active.
When we say active, it matches when an item is being activated by the user.
Meaning when I click on it, it means that it's been active.
If I move, my mouse is not active.
So let's add that one to so on pattern here and then active.
So on active.
I want to change the background color to say green.
Now have a look.
The first it is mouse Cuba.
When I click now just become green because now it's active meaning I'm still clicking on it.
If I move my mouse on it is back to the first eight months.
Hurrah to red when I click it now is an active so it has changed E to green and on active I can change
the pattern to let's say 20 pixels on both sizes.
So we have a little on mouse.
One is red on click.
I have two CSS properties being applied.
That is the width and then the pattern.
The next one is going to be what is called the focus.
And focus is also being used on a form, on a form.
So let's get back to form also.
So I think we can categorize this one and the impute, see the class, but don't worry.
So here for forecast, let's see how it's going to be.
I can have input field here.
Let me give it remove this one from here and give it a placeholder.
And let's say email for simplicity.
Six.
Now we see that.
Now it's not because as soon as I move, my kids are inside, I click.
Now it's been focused.
So on focus, I want to change the background color or the border.
So let's get back to CSIS.
So I would select my element called impute and then focus as that.
And for this I can change the background color to say green inside the input.
Have a look.
Now it's been four course.
If I click away, it's not focus.
If I move my mouse inside and click now is focused.
So this what you call user action zero classes.
The last category is what you call location.
See the class, for example, on a link.
So let's get into that the next video.