Hover states with CSS

- [Instructor] Lesson number two we talked about the site called Hoverstates when we talked about moves so, why is it called Hoverstates? Well, a hover-state is when we hover things and things happen. And we wanna do this in HTML and CSS. So we gonna go back to our project, and when I hover this link we want it to go pink. So what do we need to do here? Well, the moment I got my a-tag, which has a color and a text decoration and I'm just gonna keep this as it is, because this is the default style.

I only want to override on thing on hover. What is the thing I want to override? The text color. So, because I wanted just changes for the link on hover I'm gonna add a new style. So the style here, is I wanna select all the links, all the a-tags, but only when we hover them. So I'm gonna add something brand new here, which is called a hover-state. So a state in CSS, looks like a colon and then its a little sad face coz it doesn't know which state we're talking about, which state we talking about? We wanna do the hover-states, hover and its our p again now what we wanna do is change something when the link is hovered so I'm gonna add some curly brackets, and open this up what do I wanna change, when we hover a link? I wanna override the cascading style-sheet the cascaded bit is overriding things.

The white into pink. So color, is gonna be white, well, I want this to be pink, so I'm gonna go back to my Figma file and I'm gonna go and find my sum and meet and I'm gonna do edit-style, here it is take this, I'm gonna put it here. So because this is a hex-value I need to put a # at the start, and then paste that in. So #F4BCBB, so what we'll see now is if I go back to my preview I'm gonna hover these links, they will go pink when I want them to.