46 lines
2.0 KiB
HTML
46 lines
2.0 KiB
HTML
[!]
|
|
[=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]
|