ansaurus

Question

jQuery mouseover link to show hidden div

Answer 1

+1 A:

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.

Darin Dimitrov 2010-06-26 07:30:52

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 2010-06-26 07:33:13

@T.J. Crowder, very good remark.

Darin Dimitrov 2010-06-26 07:34:27

The downvote seems severe...

T.J. Crowder 2010-06-26 07:46:31

Please see Update 1 in the question.

Narazana 2010-06-26 07:47:00

@Morron: Please see Update 1 in the answer.

T.J. Crowder 2010-06-26 07:49:12

Answer 2

A:

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.

Iacopo 2010-06-26 07:48:07

Answer 3

+1 A:

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

Angkor Wat 2010-06-26 08:04:14

So, it takes 3 steps..Thanks.

Narazana 2010-06-26 08:06:47

ansaurus

tags:

views:

answers:

jQuery mouseover link to show hidden div

related questions