In this quick lesson Colin shows you how to use CSS Hero to change the appearance of text or graphics when the mouse is hovered over them. See how easy it is to add cool effects to your menus, buttons and other page elements.
Video Script:
Hey guys, it’s Colin here.
Welcome back to the CSS Hero Academy.
In today’s lesson, I’m going to show you how to change the hover and active states of anything on your page.
You usually would have seen this on a menu system, so if we come out to the top of this page here, you’ll see that the active link is actually white, and if we hover over, you’ll see that the hover changes to white on these other items here, and the normal state would be gray.
So let’s just start up CSS Hero, and we’ll target these and we’ll show you how they work okay.
So we’ll click on the targeting tool, wait for CSS Hero to start, now I’m going to hover over the about link here, click on that. Now as you can see here, we’ve got this icon that is got a little arrow pointing to some lines. If I click on that, I get the opportunity to change the hover, active, visited states. So the hover one would be the one we’re looking for right now, ’cause I want to change the color once my mouse hovers over that particular menu item. So I’m going to click on hover, and because this is a text element, I’m going to select the text, and then I’ll change the color.
So let’s change this to something red, so you can see what happens. Now if I hover over this now, you’ll see that it changes to red on all of those okay, so that’s the hover state taken care of.
Next thing I’m going to do is just go back okay, I’m going to come back up here, I want to change the normal state now, so I’m going to come up here and just click on normal, right now it’s gray, so we’re going to make it something completely different like blue. So if you don’t see any colors here, just click on your sidebar there and you’ll see… there we go, blue. I’m going to make it a lot lighter so you can see, there we go.
So, now we’ve got a normal state of blue and we’ve got hover color of red, now the only thing that stands out right now is this one over here. Now this one’s a separate item on its own, because in (..), it’s actually a top menu and is the current menu link, so this one gets a little bit confusing, I’m going to click on it, now the top menu item is a separate item completely, so hover and active are different. Now the one you have to change on this one is the normal state on this one. So let’s just change this from white, let’s make it to a green and we’ll… there we go. And you can see that it changes it completely. So that was just the menu items changed, now let’s say I want to change the background color of this button once I hover over it, as you can see right now, it goes purple. So I’m going to click on that, I’m going to click on the slide more button, but I’ve also got this option of clicking on this now, so I’m going to click on here, and I’ve got the hover option again, I’m going to click on it, now because it’s a graphic, we want to change the background color of this one, okay and it says it’s gray, but I’m going to change it to… let’s do red again okay, and as you can see, if I hover over that, it makes it into that bright red.
So you can do this on a lot of things, now if I come down here and select one of these icons, no actually you know what, lets select this blip title, okay I am going to go to the blip title area, I’m going to click on the icon, I’m going to click on the hover options, the only option I have at this point, I’m going to change the background on this one to… let’s change it to green. I’ve got the color down here it’s already used, so I can select it from there. Now if I hover over here, you’ll notice that the background goes green.
Now to make that really nice in fact, what I will do now, is I will go back into the text and make the hover states white, so that the white will stand out on top of the background.
You see how you can change those options, very cool eh?
So very simple to do, choose your text, or your background color, and then you can choose the little icon
with the arrow pointing at some lines, click on that, you’ll get the options to change all these.
So right now I’m on the hover state, if I go back to the normal state, if I click on my text, I want to change that color, I can change it to the normal state, and there you can see. I’m just going to actually undo that, so I’m going to cancel that, and that’s it for today’s lesson. So I’m going to set that all back to normal, that’s the hover, visited and active states.
I hope you’ve enjoyed this lesson, please click on the subscribe button if you want to get more and please share with your friends.
Thanks for watching, I’ll see you next week.