javascript - 使用 DOM 将鼠标悬停在文本上时从头开始创建新的 div 元素

Question

我正在尝试在悬停文本时获取“工具提示”。 该工具提示应放置在文本下方。工具提示应该从数据库获取其内容，但我可以处理该部分，并使用 css 对其进行样式设置。这里唯一的问题是当鼠标悬停时我无法从头开始创建新的 div 元素。

我当前的代码使用现有的 div 元素，但代码应该创建一个新的 div 元素来放置代码。

<script>
   function createTooltip(str)
   {
      if (str == "" || !str)
      {
         return;
      }

      if (window.XMLHttpRequest)
      {
         xmlhttp = new XMLHttpRequest();
      }
      else // code for IE5 and IE6
      {
         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }

      xmlhttp.onreadystatechange = function()
      {
         if (xmlhttp.readyState==4 && xmlhttp.status==200)
         {
            document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
         }
      }
      xmlhttp.open("GET", "tooltip.php?s="+str, true);
      xmlhttp.send();
   }

   function removeTooltip()
   {
      document.getElementById("txtHint").innerHTML = "";
   }
   </script>
   <p><br>
   <a href="" rel="35" onmouseover="createTooltip(this.rel);" onmouseout="removeTooltip();">Test</a>
   <br><br>
   <div id="txtHint"></div></p>

tooltip.php 文件包含以下内容:

<?php
$q = intval($_GET['s']);
echo $q;
?> 

现在它只打印函数中的 rel 属性。现在我真正想要它做的是创建一个全新的 div，其中包含 xml 响应，而不是现有的 div。所以这个工具提示应该出现在文本下方，就像这个现有的 div 一样。将来我会将其设为悬停 div 元素，因此它只会悬停在所有内容上。

感谢您抽出宝贵的时间，我很感激。

Answer 1

您可以使用.hover()函数来定义mouseover/mouseout事件。您可以使用 .after() 附加新的 DIV，并使用 .remove() 删除它。

假设这是您将鼠标悬停在其上的元素:

<a href="#" id="test" rel="35">Test</a>

此示例演示了效果:

$('#test').hover(
    function() {
        var text = "Tooltip for rel: " + this.rel;
        $(this).after($("<div></div>").html(text).addClass("tooltip"));
    },

    function() {
        $(this).next().remove();
    }
)

这是现场演示:http://jsfiddle.net/3LgWk/1/

哦，jQuery 还使 AJAX 调用变得更加容易 - 有机会就看看吧。