jQuery mouseover link to show hidden div
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 Tran开发者_开发知识库sitional//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'); });
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.
With a simple HTML:
<div class="div1">Hover me</div>
<div class="div2" style="display: none">Hi, there</div>
When passing over div1 you show div2, and hide it only after the user get inside it and then exit:
<script type="text/javascript">
$('.div1').hover(function() {$('.div2').show()});
$('.div2').hover(function() {}, function() {$('.div2').hide()});
</script>
This is a quick, non optimal solution, but will work even if the two divs are not adjacent.
加载中,请稍侯......
精彩评论