hover div to appear text in jquery issue

I have a problem her开发者_如何学Ce. When my mouse hover over a div, a text appear in the div. And when it is on mouseout from the div, the text will disappear. My problem is however when the mouse is over the appeared text, it will treat that it is mouseout from the div, causing the text to disappear. How can i do to avoid that? I want the text to remain as long the mouse is in the div even though it is above the text. Thanks..

<div class="passd"></div>

    $('.passd').live("mouseover", function(){
  if($(this).children('#passopt').length==0){
   $(this).append('<p id="passopt">appear text</p>');
  }
 });
 $('.passd').live("mouseout", function(){
  $(this).children('#passopt').remove();
 });

Try this:

$('.passd')
    .live("mouseenter", function() {
        $(this).append('<p id="passopt">appear text</p>');
    })
    .live("mouseleave", function() {
        $(this).children('#passopt').remove();
    });

Tested, and works: http://jsfiddle.net/xLzdP/

you could use the mouseleave event instead...

http://api.jquery.com/mouseleave/

Check out http://flowplayer.org/tools/tooltip/index.html to see if it can do what you want...

You could achieve just as much with using .hover():

    $('.passd').hover(function() {
        $(this).append('<p id="passopt">appear text</p>');
}, function(){
        $(this).children('#passopt').remove();
    });