悬停 div 以在 jquery 问题中显示文本答案

【问题标题】：hover div to appear text in jquery issue悬停 div 以在 jquery 问题中显示文本
【发布时间】：2010-12-04 20:45:24
【问题描述】：

我这里有问题。当我的鼠标悬停在 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();
 });

【问题讨论】：

我遇到了问题，我们可以通过使用一些布尔值 true 或 false 来实现你想要的，但这不是一个好方法，让我想想再回来......

标签： javascript jquery hover mouseevent mouseover

【解决方案1】：

试试这个：

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

经过测试，可以正常工作：http://jsfiddle.net/xLzdP/

【讨论】：

【解决方案2】：

您可以改用 mouseleave 事件...

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

【讨论】：

+1 因为你给出了解决方案，但你也会给出一些代码，所以人们喜欢它..

【解决方案3】：

查看http://flowplayer.org/tools/tooltip/index.html 看看它是否可以满足您的需求...

【讨论】：

他遇到的问题是文本的鼠标悬停被视为div的鼠标悬停所以它隐藏了文本，我们可以使用插件，但我们应该看看如何解决他的问题。
有时解决方案是使用已经解决的工具。 :)

【解决方案4】：

使用 .hover() 也可以达到同样的效果：

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

【讨论】：