<html>
<head>
<title>Hover tests</title>
<script src="jquery.js"></script>
<style>
/* Remove body dimensions so we can test enter/leave to surrounding browser chrome */
body, html {
	border: 0;
	margin: 0;
	padding: 0;
}
p {
	margin: 2px 0;
}
.hover-box {
	background: #f33;
	padding: 3px;
	margin: 10px 40px 20px 0;
}
.hover-status {
	background: #f66;
	padding: 1px;
}
.hover-inside {
	background: #6f6;
	padding: 1px;
	margin: 8px auto;
	width: 40%;
	text-align: center;
}
</style>
 </head>
 <body>
	<h2>Hover (mouse{over,out,enter,leave}) Tests</h2>
	<p>Be sure to try moving the mouse out of the browser via the left side on each test.</p>
	<div id="wrapper">

	<div id="hoverbox" class="hover-box">
		<div class="hover-status">
			<button>Activate</button>
			.hover() in/out: <span class="ins">0</span> / <span class="outs">0</span>
		</div>
		<div class="hover-inside">
			Mouse over here should NOT trigger the counter.
		</div>
	</div>
	<div id="liveenterbox" class="hover-box">
		<div class="hover-status">
			<button>Activate</button>
			Live enter/leave: <span class="ins">0</span> / <span class="outs">0</span>
		</div>
		<div class="hover-inside">
			Mouse over here should NOT trigger the counter.
		</div>
	</div>
	<div id="delegateenterbox" class="hover-box">
		<div class="hover-status">
			<button>Activate</button>
			Delegated enter/leave: <span class="ins">0</span> / <span class="outs">0</span>
		</div>
		<div class="hover-inside">
			Mouse over here should NOT trigger the counter.
		</div>
	</div>

	<div id="overbox" class="hover-box">
		<div class="hover-status">
			<button>Activate</button>
			Bind over/out: <span class="ins">0</span> / <span class="outs">0</span>
		</div>
		<div class="hover-inside">
			Mouse over here SHOULD trigger the counter.
		</div>
	</div>
	<div id="liveoverbox" class="hover-box">
		<div class="hover-status">
			<button>Activate</button>
			Live over/out: <span class="ins">0</span> / <span class="outs">0</span>
		</div>
		<div class="hover-inside">
			Mouse over here SHOULD trigger the counter.
		</div>
	</div>
	<div id="delegateoverbox" class="hover-box">
		<div class="hover-status">
			<button>Activate</button>
			Delegated over/out: <span class="ins">0</span> / <span class="outs">0</span>
		</div>
		<div class="hover-inside">
			Mouse over here SHOULD trigger the counter.
		</div>
	</div>

	</div> <!-- wrapper -->

<script>

$(function(){

	var x,
		countIns = function() {
			var d = $(this).data();
			$("span.ins", this).text(++d.ins);
		},
		countOuts = function() {
			var d = $(this).data();
			$("span.outs", this).text(++d.outs);
		};

	// Tests can be activated separately or in combination to check for interference

	$("#hoverbox button").click(function(){
		$("#hoverbox")
			.data({ ins: 0, outs: 0 })
			.hover( countIns, countOuts );
		$(this).remove();
	});
	$("#delegateenterbox button").click(function(){
		$("html")
			.find("#delegateenterbox").data({ ins: 0, outs: 0 }).end()
			.delegate("#delegateenterbox", "mouseenter", countIns )
			.delegate("#delegateenterbox", "mouseleave", countOuts );
		$(this).remove();
	});
	$("#liveenterbox button").click(function(){
		$("#liveenterbox")
			.data({ ins: 0, outs: 0 })
			.live("mouseenter", countIns )
			.live("mouseleave", countOuts );
		$(this).remove();
	});

	$("#overbox button").click(function(){
		$("#overbox")
			.data({ ins: 0, outs: 0 })
			.bind("mouseover", countIns )
			.bind("mouseout", countOuts );
		$(this).remove();
	});
	$("#liveoverbox button").click(function(){
		$("#liveoverbox")
			.data({ ins: 0, outs: 0 })
			.live("mouseover", countIns )
			.live("mouseout", countOuts );
		$(this).remove();
	});
	$("#delegateoverbox button").click(function(){
		$(document)
			.find("#delegateoverbox").data({ ins: 0, outs: 0 }).end()
			.delegate("#delegateoverbox", "mouseover", countIns )
			.delegate("#delegateoverbox", "mouseout", countOuts );
		$(this).remove();
	});
});

</script>
</body>
</html>