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.
83 lines
2.2 KiB
83 lines
2.2 KiB
<!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>
|