Menu
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?
823
The hover() method specifies two functions to run when the mouse pointer hovers over the selected elements. This method triggers both the mouseenter and mouseleave events. Note: If only one function is specified, it will be run for both the mouseenter and mouseleave events.
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'); });
You could use the .hover function:
$(function() {
$('#divOne').hover(function() {
$('#divTwo').show();
}, function() {
$('#divTwo').hide();
});
});
where you have the two divs:
<div id="divOne">div one</div>
<div id="divTwo" style="display: none;">div two</div>
UPDATE:
As mentioned in the comments section the second div will disappear if the mouse leaves the first. There are many plugins out there that would allow you to achieve the desired behavior. This one looks particularly nice.
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
