Html程序  |  58行  |  1.63 KB

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<style>
    div { width: 60px; text-align: center;
            position: relative; }
    div#a { background: green; }
    div#b { background: yellow; }
    div#a:hover { background: red; }
    div#b:hover { background: green; }
    span#c:hover { color: red; }
</style>
</head>
<body>
<p><b>BUG ID:</b> <a href="http://bugs.webkit.org/show_bug.cgi?id=6821">Bugzilla bug 6821</a> Fix for 5983 will not always update hover correctly.</p>

<p id="test" style="background-color:skyblue; padding:3px;"><b>STEPS TO TEST:</b> 
Move the mouse over the text &ldquo;Hover here&rdquo; until it disappears and &ldquo;Wait&rdquo; appears, then DO NOT MOVE the mouse
until the end of the test.
</p>

<p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b> 
After a second, you should see &ldquo;Only green now&rdquo; over a green background.
No other colors should be visible.
</p>

<p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b>  
&ldquo;Only green now&rdquo; will appear over a yellow background with a red
rect at the top. If you  move the mouse over the background, the colors will
change to green eventually.
</p>

<hr>

<script type="text/javascript">
function hideC()
{
    c.style.display = 'none';
}

function hoveredC()
{
    window.setTimeout(hideC, 1000);
}

</script>

<div id="a">
<div style="height: 20px;"></div>
<span id="c" onmouseover="hoveredC()">Hover here<br><span style="background: black;">&nbsp;Wait&nbsp;</span></span>
</div>
<div id="b">
Only green now
</div>
</body>
</html>