Hungry & Gone Classes

[00:00:00]
>> Brian Holt: Now, if the bird goes over a hungry mole, right, it should have a worm in its mouth, right? So that that let's the user know, it's like if you click on this, you're gonna get points. So the way we can do that is we can say .hungry,

[00:00:22]
>> Brian Holt: When someone's over it, you can say cursor URL dot slash cursor dash worm PNG, comma default. So now whenever someone moves the mouse over one of the hungry moles it's going to have a different image than just this mole right here. So just to test that out, let's go and just add hungry on to one of these.

[00:00:50]
Okay, so this one and then we're going to add the class of hungry, save that. That's because I'm modifying the wrong HTML. That's why, easy to do, hungry. There we go. And now I can modify that and there you go. You can see when the mouse is over the hungry one, you've got a little worm in its mouth.

[00:01:14]
And then when I move it off, it no longer has it. It's kind of fun, right? And it's cool that this was all done with CSS, right? There's no code governing this. This is just the browser saying whenever something's over something else, just change the image behind it.

[00:01:30]
So we can take hungry off that I just wanted to make sure it worked. Let's go back to styles.CSS. So a mole that is gone we just want to say display none. So if we come back over here to this first mole and I put gone. And say that I want nothing to be in the hole, I just want the hole to be there, right?.

[00:01:55]
>> Brian Holt: So now that I can have moles coming in and out.
>> Brian Holt: So that's good.
>> Brian Holt: And we'll worry about the worm and the winds later.
>> Brian Holt: All right, this is pretty good. This should get us started working on our JavaScript.