<html>
<head>
<script src="jquery-1.4.1.js" type="text/javascript"></script>
<style type="text/css">
#imp {
background-color:#adadad;
display:none;
}
</style>
</head>
<body>
<div id="link">
<a id="link1" href="jq1.html">Click here! <a/>
</div>
<div id="imp">
<p> DIV appears when mouseover, out with mouseout, But not after click </p>
</div>
<div id="click">
<p> This Div is always here.</p>
</div>
<script>
$(document).ready(function(){
function mouseOver()
{
$("#imp").css('display', 'block');
}
function mouseOut()
{
$("#imp").css('display', 'none');
}
$('#link a').hover(mouseOver, mouseOut);
$('#link a').mouseover(mouseOver).mouseout(mouseOut);
$('#link a').bind('mouseover', mouseOver).bind('mouseout', mouseOut);
$('#link a').click(function(e) {
e.preventDefault();
$('#link a').unbind('mouseover', mouseOver).unbind('mouseout', mouseOut);
});
});
</script>
</body>
</html>