I came across the mouseover event on extratorrent site like the following image.
alt text http://img3.imageshack.us/img3/4516/usercommment999.jpg
When you hover the mouse over the username link, it shows a hidden div. Pretty neat and slick.
I'm new to jQuery.Can anyone show me how to get start on the right track to do that? Thanks.
Update 1:
I wrote something like the following attempting to get the result. The problem is that when I mouse the mouse out the link the Div wont stay, it disappear immediately.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#show_div").mouseover(function() { $("#hello").css('visibility','visible'); });
$("#show_div").mouseout(function() { $("#hello").css('visibility','hidden'); });
});
</script>
</head>
<body>
<a id="show_div" href="#">Link text</a>
<div id="hello" style="visibility:hidden;">
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</div>
</body>
</html>
What to do to make Div stay visible when mouse over the Div?
When mouseover the Link text, you set the Visiblility of the div "hello" to visible. Then on mouseover the div "hello", you also set div "hello" visibility to visible. On mouseout of the div "hello" you set its visibility to "hidden". Something like this:
$("#show_div").mouseover(function() { $("#hello").css('visibility','visible'); });
$("#hello").mouseover(function() { $("#hello").css('visibility','visible'); });
$("#hello").mouseout(function() { $("#hello").css('visibility','hidden'); });