Skip to content

Instantly share code, notes, and snippets.

@ibrow

ibrow/gist:1751850

Created February 6, 2012 12:28
Show Gist options
  • Save ibrow/1751850 to your computer and use it in GitHub Desktop.
Save ibrow/1751850 to your computer and use it in GitHub Desktop.
Download ZIP
jQuery DOM index testing
Raw
gistfile1.html
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery DOM index testing</title>
<style type="text/css">
#wrap .rolloverlayer {
background: #eaeaea;
height: 100px;
width: 200px;
margin: 0 0 15px;
padding: 0;
}
#wrap .hoverlayer {
background: #666;
color: #fff;
display: inline;
height: 100px;
width: 200px;
margin: 0;
padding: 0;
position: absolute;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
$(document).ready(function() {
$(".hoverlayer").hide();
$(".rolloverlayer").mouseenter(
function() {
var i = $(this).index() - 1;
var parent = $(this).parent();
$(parent).find("> div:eq("+i+")").slideDown("fast");
}
);
$(".hoverlayer").mouseleave(
function() {
$(this).slideUp("fast");
}
);
});
</script>
</head>
<body>
<h1>Testing</h1>
<div id="wrap">
<div class="hoverlayer">
<div class="content">
<p>Content Hover One</p>
</div>
</div>
<div class="rolloverlayer">
<p>Rollover me One</p>
</div>
<div class="hoverlayer">
<div class="content">
<p>Content Hover Two</p>
</div>
</div>
<div class="rolloverlayer">
<p>Rollover me Two</p>
</div>
<div class="hoverlayer">
<div class="content">
<p>Content Hover Three</p>
</div>
</div>
<div class="rolloverlayer">
<p>Rollover me Three</p>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment