BlackMac/gist:91734

## gistfile1.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Test</title>
	<meta name="generator" content="TextMate http://macromates.com/">
	<meta name="author" content="">
	<style type="text/css">
		#test
		{
			width:300px;
			height:300px;
			border:1px solid red;
			z-index:10;
		}
		#test_content
		{
			line-height:300px;
		}

		#overlap
		{
			background-color:#cccccc;
			width:300px;
			display:none;
			z-index:10;
		}

		#underthingie
		{
			background-color:red;
			z-index:0
		}
	</style>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools.js"></script>
	<script type="text/javascript">
	document.window.addEvent('domready', function() {
			$('test').addEvent('mouseenter', function(){
					$('overlap').setStyle('display','block');
			});

			$('test').addEvent('mouseleave', function(){
					$('overlap').setStyle('display','none');
			});
	});
	</script>
</head>
<body>
	<div id="test">
		<div id="test_content">Parent
		</div>
		<div id="overlap" style="">
		Child<br>
		Child<br>
		Child
		</div>
	</div>
	<div id="underthingie">Unrelated</div>
</body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">

	<html lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Test</title>
	<meta name="generator" content="TextMate http://macromates.com/">
	<meta name="author" content="">
	<style type="text/css">
	#test
	{
	width:300px;
	height:300px;
	border:1px solid red;
	z-index:10;
	}
	#test_content
	{
	line-height:300px;
	}

	#overlap
	{
	background-color:#cccccc;
	width:300px;
	display:none;
	z-index:10;
	}

	#underthingie
	{
	background-color:red;
	z-index:0
	}
	</style>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools.js"></script>
	<script type="text/javascript">
	document.window.addEvent('domready', function() {
	$('test').addEvent('mouseenter', function(){
	$('overlap').setStyle('display','block');
	});

	$('test').addEvent('mouseleave', function(){
	$('overlap').setStyle('display','none');
	});
	});
	</script>
	</head>
	<body>
	<div id="test">
	<div id="test_content">Parent
	</div>
	<div id="overlap" style="">
	Child<br>
	Child<br>
	Child
	</div>
	</div>
	<div id="underthingie">Unrelated</div>
	</body>
	</html>