Page 1 of 1

jQuery Question

Posted: Wed Aug 06, 2008 9:10 pm
by imderek
I've put together a quick page with a link and a <p> below it. Mousing over the link shows the <p>, and once you move your mouse off of the link, the <p> is hidden. (Simple, right?) See http://www.imderek.com/dev/jquery.php.

Code: Select all

$(document).ready(function(){
    $('p').hide();
    $('a#toggleLink').mouseover(function(){
        $('p').show('fast');
    });
    $('a#toggleLink').mouseout(function(){
        $('p').hide('fast');
    });
});

Code: Select all

<a href="#" id="toggleLink">Toggle content</a>
<p>Maecenas facilisis dictum ante. Duis ac nisl...</p>
 
The question is: how can I make it so that the <p> stays open if you move your mouse down from the link and into the <p>, and then finally hide it if the mouse moves off of it?

Much thanks in advance.

Re: jQuery Question

Posted: Wed Aug 06, 2008 9:25 pm
by Christopher
Remove the mouseout() function. Usually with menus the mouseover() function would hide all open popups and then show the one called by the mouseover.

Re: jQuery Question

Posted: Thu Aug 07, 2008 2:29 am
by Eran
You should have the mouseover event on an element containing both. Something like:

Code: Select all

 
<div class="hover">
    <a href="#" id="toggleLink">Toggle content</a>
    <p>Maecenas facilisis dictum ante. Duis ac nisl...</p>
</div>
 

Code: Select all

 
$(document).ready(function(){
    $('p').hide();
    $('div.hover').hover(function(){
        $('p',this).show();
    },function(){
        $('p',this).hide();
    });
});
 
Since the 'p' is nested inside the div, you are still hovering over it when you move the mouse over the p.

Re: jQuery Question

Posted: Thu Aug 07, 2008 7:47 am
by imderek
That did it. Thanks, pytrin!