JavaScript and client side scripting.
Moderator: General Moderators
imderek
Forum Newbie
Posts: 12 Joined: Thu Jul 24, 2008 9:04 am
Post
by imderek » Wed Aug 06, 2008 9:10 pm
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.
Christopher
Site Administrator
Posts: 13596 Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US
Post
by Christopher » Wed Aug 06, 2008 9:25 pm
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)
Eran
DevNet Master
Posts: 3549 Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME
Post
by Eran » Thu Aug 07, 2008 2:29 am
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
Post
by imderek » Thu Aug 07, 2008 7:47 am
That did it. Thanks, pytrin!