jQuery mouseover link to show hidden div

Question

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?

score 13 · Accepted Answer · answered Jun 26 '10 at 08:04

13

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'); });

answered Jun 26 '10 at 08:04

Tola

2,401
10
36
60

So, it takes 3 steps..Thanks. – Narazana Jun 26 '10 at 08:06
I needed to implement something like this and added a mouseout to #show_div. $("#show_div").mouseout(function() { $("#hello").delay("fast").css('visibility','hidden');}); The idea was that the list items should go away after a delay, but this does not work. If I take out the delay, the list items go away as soon as the mouse moves away from the link. With the delay in, the list items never go away. Any idea why? Thanks!!! – AggieMan Dec 22 '16 at 20:36
I looked into this a little more and it turns out that in order to make it work, I need to do: $("#show_div").mouseout(function() { setTimeout(function () {$("#hello").css('visibility','hidden');}, 200); }); – AggieMan Dec 22 '16 at 22:08

Darin Dimitrov · Answer 2 · 2010-06-26T07:39:00.390

6

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.

edited Jun 26 '10 at 07:39

answered Jun 26 '10 at 07:30

Darin Dimitrov

1,023,142
271
3,287
2,928

1

The problem is that if the user moves them mouse into the freshly-shown `divTwo`, it will disappear out from under them as the mouse leaves `divOne`. Not an ideal UX. – T.J. Crowder Jun 26 '10 at 07:33
Please see Update 1 in the question. – Narazana Jun 26 '10 at 07:47
1

@Morron: Please see Update 1 in the answer. – T.J. Crowder Jun 26 '10 at 07:49

score 0 · Answer 3 · answered Jun 26 '10 at 07:48

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.

jQuery mouseover link to show hidden div

3 Answers3