jQuery Question

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
imderek
Forum Newbie
Posts: 12
Joined: Thu Jul 24, 2008 9:04 am

jQuery Question

Post 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.
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: jQuery Question

Post 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.
(#10850)
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: jQuery Question

Post 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.
imderek
Forum Newbie
Posts: 12
Joined: Thu Jul 24, 2008 9:04 am

Re: jQuery Question

Post by imderek »

That did it. Thanks, pytrin!
Post Reply