hover時に時間差で要素を表示する

by iwbjp

HTML

<div id="main">
	<div id="a">
    	title
        <div id="b">description</div>
    </div>
</div>

CSS

#main {
	width: 400px;
	border: 1px solid #CCC;
}

#a {
	padding: 10px;
	background: #CCC;
}

#b {
	display: none;
	padding: 50px 0;
}

JavaScript

$(function(){
	var d;
	$("#a").hover(
		function(){
			d = setTimeout(function(){
				$("#b").show();
			}, 2000);
		},
		function(){
			clearTimeout(d);
			$("#b").hide();
		}
	);
});