hi i have following code in this i have div card-208 on click i dont want to show the divtoshow div but on mouseover i want to show it wil some delay but not on click
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
.card {
border:1px solid transparent;
cursor:pointer;
float:left;
height:50px;
margin:10px;
padding:3px;
width:50px;
background:#000;
color:#fff;
}
.ui-corner-all {
-moz-border-radius:4px 4px 4px 4px !important;
}
</style>
</head>
<body>
<!-- <div id="popupContact" style="position:absolute;left:100px;top:100px;width:100px;height:50px;background-color:orange;border:1px solid red ;">
</div> -->
<div class="card ui-corner-all" id="card-208">
<div class="card-name"> Rahul1's Gib 1 </div>
</div>
'<div id="divtoshow" style="display:block;background-color:green; border:1px solid black;width:200px;height:100px;position:absolute;">
dsfdssd <a href="#">rahul</a>
</div>
</body>
</html>
<script type='text/javascript'>
$(document).ready(function(){
var popup_pos=$('#card-208').offset();
var timer;
$("#card-208").bind('mouseover',{},function() {
setTimeout(function() {
$("#divtoshow").show();
}, 1000);
});
$("#card-208").bind('click',{},function() {
$("#card-208").unbind('mouseover');
alert('click event is triggered');
});
$("#divtoshow").bind('mouseleave',{} ,function() {
$("#divtoshow").hide();
});
});
</script>