jQuery mouseover link to show hidden div

Question

jQuery mouseover link to show hidden div

51.1k views Asked by Narazana At 24 November 2024 at 13:37

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?

Original Q&A

There are 3 answers

Iacopo On 26 June 2010 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.

Darin Dimitrov On 26 June 2010 at 07:30

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.

**Tola** · Accepted Answer · 2010-06-26 08:04:14

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

TechQA.

jQuery mouseover link to show hidden div

There are 3 answers

Related Questions in JQUERY

Related Questions in HTML

Related Questions in SITEDESIGN

Popular Questions

Popular Tags

Trending Questions