Console Tools 2 - Hover Oriented
by bizamajig
HTML
<div style="float: left; width: 200px; height: 600px;" class="shipmentList">
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
</div>
<div style="float: left; background: red; width: 200px; height: 600px;" class="controller">
<div id="follower">
<input id="btnAll" type="button" value="All" /><br/>
<input id="btnNone" type="button" value="None" /><br />
<input id="btnStuff" type="button" value=">>" /><br />
</div>
</div>
<div style="float: left; width: 200px; height: 600px;" class="shipped">
<ul>
<li>item 2</li>
<li>item 2</li>
<li>item 2</li>
<li>item 2</li>
<li>item 2</li>
<li>item 2</li>
<li>item 2</li>
<li>item 2</li>
<li>item 2</li>
<li>item 2</li>
<li>item 2</li>
<li>item 2</li>
<li>item 2</li>
<li>item 2</li>
<li>item 2</li>
<li>item 2</li>
<li>item 2</li>
<li>item 2</li>
<li>item 2</li>
...
JavaScript
$(".controller").mouseenter( function( event ) {
alert( $(this).offset().top);
$("#follower").offset({ top: $(this).offset().top });
} );