Static website for local motocross track (circa Jun 2004)
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
This repo is archived. You can view files and clone it, but cannot push or open issues/pull-requests.
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>CSS Fast Rollovers Without Preload - Updated</title>
<style type="text/css">
body { margin:2em; padding:0; background: white; } #menu { height: 25px; margin: 3em 0; padding:0 1em; border-bottom: 1px solid black; }
div.outer { float: left; width: 120px; height: 25px; margin: 0 3px 0 0; background: url( 'bars.gif' ) 0 -50px no-repeat; }
div.outer a { display: block; margin: 0; padding:0; width:100%; height:100%; overflow:hidden; font: bold 13px/1 Georgia, serif; color:#039; text-decoration: none; background: url( 'bars.gif' ) top left no-repeat; }div.outer span { display: block; margin:0; padding: 7px 0 0 13px; }div.outer a:hover { background-image: none; color: yellow; }div.outer a:active { color: black; }
</style>
</head><body>
<div id="menu"> <div class="outer"><a href="#"><span>First</span></a></div> <div class="outer"><a href="#"><span>Second</span></a></div> <div class="outer"><a href="#"><span>Third</span></a></div></div>
<h1>CSS Fast Rollovers Without Preload - Updated</h1>
<p>Simple yet strong update of the <a href="index.html">Fast Rollovers Without Preload</a> comes from Marek Blaha (Czech author). This workaround solves the problem when Windows IE sometimes slowly reloads the background image causing the element flickers while mouse hovering.</p>
<p>The solution is just simple: the background image (moved to the "hover position") is attached to the outer element, and the same background is attached to the inner A element as well (in the "base position" though). The :hover state just changes the A's background to transparent making the 'outer' background bellow visible. Thus, no background is beeing switched and IE has no more reason to flicker.</p>
<p>Check the source code of this document to see the solution at work. It works fine in every browser I've met...</p>
<hr />
<p>Posted by <a href="http://www.pixy.cz">Petr Stanicek [aka -pixy-]</a>, 2003-11-27,00.05 CET</p>
</body></html>
|
