将鼠标悬停在 div 中以显示 jquery 问题中的文本

Question

我这里有问题。当我的鼠标悬停在 div 上时，div 中会出现一段文本。当鼠标从 div 移出时，文本将消失。然而，我的问题是，当鼠标悬停在出现的文本上时，它会认为它是从 div 中移出的，导致文本消失。我该怎么做才能避免这种情况？我希望只要鼠标位于 div 中，文本就会保留，即使它位于文本上方。谢谢..

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

Answer 1

试试这个：

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

经过测试，有效：http://jsfiddle.net/xLzdP/

Answer 2

您可以使用 mouseleave 事件来代替...

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

Answer 3

查看 http://flowplayer.org/tools/tooltip/index.html 查看如果它能做你想做的事...

Answer 4

使用 .hover() 可以获得同样多的效果：

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