[!]
[=title "Week 13: Hover"]
[=content-]
<p>
	So far we've gotten pretty good at making simple, functional websites - but, for the most part,
	they're <i>static</i>! This means they don't have any kind of interaction with the user;
	they may as well just be a printed page.
</p>
<p>
	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 <code>:hover</code> <i>pseudo-class</i>.
</p>
<p>
	The idea behind a <i>pseudo-class</i> is that it behaves like a normal CSS class,
	but is set <i>by the browser</i> under specific circumstances. This allows
	webpages to react to changes. The <code>:hover</code> 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.
</p>
<p>
	For example, this code makes a simple hover button (assume the HTML is set up with some element which has <code>id="my_button"</code> set):
</p>
<pre><code>#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;
}</code></pre>
<p>
<style>#my_button1{ padding: 10px; background-color: purple; color: white; } #my_button1:hover {background-color: white; color: purple; }</style>
	The result looks like this: <span id="my_button1">My Button</span> (try putting your mouse over it!)
</p>
<p>
	The use for this is obvious! With <code>:hover</code>, you can produce a lot of
	really fun effects.
</p>
<p>
	Note that <code>:hover</code> can be applied to <i>any</i> selector, not just an ID selector!
	<code>.class_name:hover</code>, <code>body:hover</code>, and <code>div.button:hover</code>, are all valid selectors.
</p>
[/]
[#template.html]