[!] [=title "Week 13: Hover"] [=content-]

So far we've gotten pretty good at making simple, functional websites - but, for the most part, they're static! This means they don't have any kind of interaction with the user; they may as well just be a printed page.

This week, we're going to change that! Interactive webpages are a massive topic, but we're going to start with one of the simpler forms - the CSS `:hover` pseudo-class.

The idea behind a pseudo-class is that it behaves like a normal CSS class, but is set by the browser under specific circumstances. This allows webpages to react to changes. The `:hover` pseudo-class is probably the most engaging one: when you select an element's hover pseudo-class, the rules will only be applied when that element is hovered by the mouse.

For example, this code makes a simple hover button (assume the HTML is set up with some element which has `id="my_button"` set):

    #my_button { /* this is *always* applied, no matter what */
    	padding: 10px;
    	background-color: purple;
    	color: white;
    }
    #my_button:hover { /* these are only applied when the button is hovered, and override the previous ones */
    	background-color: white; /* we say these are *more specific*, because of the :hover pseudo-class selector */
    	color: purple;
    }

The result looks like this: My Button (try putting your mouse over it!)

The use for this is obvious! With `:hover`, you can produce a lot of really fun effects.

Note that `:hover` can be applied to any selector, not just an ID selector! `.class_name:hover`, `body:hover`, and `div.button:hover`, are all valid selectors.

[/] [#template.html]