StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>CSS is fine for rollovers. They're implemented basically using the <code>:hover</code> pseudo-selector. Here's a really simple implementation:</p> <pre><code>a{ background-image: url(non-hovered-state.png); } a:hover{ background-image: url(hovered-state.png); } </code></pre> <p>There are a few things you need to be aware of though:</p> <ul> <li>IE6 only supports <code>:hover</code> on <code><a></code> tags</li> <li>Images specified in CSS but not used on the page won't be loaded immediately (meaning the rollover state can take a second to appear first time)</li> </ul> <p>The <code><a></code>-tags-only restriction is usually no problem, as you tend to want rollovers clickable. The latter however is a bit more of an issue. There is a technique called <a href="http://alistapart.com/articles/sprites/" rel="nofollow noreferrer">CSS Sprites</a> that can prevent this problem, you can find an example of the technique in use to make <a href="http://www.wellstyled.com/css-nopreload-rollovers.html" rel="nofollow noreferrer">no-preload rollovers</a>. </p> <p>It's pretty simple, the core principle is that you create an image larger than the element, set the image as a background image, and position it using <code>background-position</code> so only the bit you want is visible. This means that to show the hovered state, you just need to reposition the background - no extra files need to be loaded at all. Here's a quick-and-dirty example (this example assumes you have an element 20px high, and a background image containing both the hovered and non-hovered states - one on top of the other (so the image is 40px high)):</p> <pre><code>a{ background-image: url(rollover-sprites.png); background-position: 0 0; /* Added for clarity */ height: 20px; } a:hover{ background-position: 0 -20px; /* move the image up 20px to show the hovered state below */ } </code></pre> <p>Note that using this 'sprites' technique means that you will be unable to use alpha-transparent PNGs with IE6 (as the only way IE6 has to render alpha-transparent PNGs properly uses a special image filter which don't support <code>background-position</code>)</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload