在使用 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>

工具提示.php文件中包含以下内容：

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

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

谢谢你的时间，我很感激。

Answer 1

您可以使用

.hover()函数来定义鼠标悬停/鼠标退出事件。可以使用.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调用变得更加容易 - 当你有机会时，看看它。