javascript - 悬停效果与 JavaScript

Question

我需要一些有关 JavaScript 代码的帮助。我正在尝试从 XML 数据中获取节点名称，我已经成功地这样做了，但现在我正在尝试创建一个小的 div 它将创建一个描述框，它将显示我的名字该元素，当我将鼠标悬停在该元素上时。我的意思是，当我将鼠标悬停在book 上时，描述框将显示book，如果我将鼠标悬停在price 上，描述框将显示价格。如果鼠标光标移到该元素之外，则描述标签将消失，我正在附加实时 fiddle 。所有这些事情都需要用 JavaScript 来完成，而不是 JQUERY。

Live Fiddle

---

book
  title
  author
  year
  price

---

function moveDescrip(event)
{
    var d = document.getElementsByClassName("Desc")[0];
    var x=event.clientX;
    var y=event.clientY;
    d.style.top = (y + 10) + "px";
    d.style.left = (x + 10) + "px";
}

function showDescrip()
{
    var d = document.getElementsByClassName("Desc")[0];
    d.style.visibility="visible";
}

function hideDescrip()
{
    var d = document.getElementsByClassName("Desc")[0];
    d.style.visibility="hidden";
}

Answer 1

我已经更新了你的 jsfiddle现在可以了。

基本上，当您创建“li”元素时，我会使用 node.name 值向其添加 _name 属性。这样，在 showDescrip 事件处理程序中，我只需检索属性并将其放入 float 的 div 中。我正在用 innerText 做这件事。如果你想显示一个更漂亮的 float div，带有图像等，你必须用其他东西替换 .innerText = 'desc'，也许在 div 中放置一个 'span' 元素并放置描述里面。

最后，您需要调用 stopPropagation()，这样只有悬停在其上的元素会显示描述。如果不这样做，您将只会看到根节点的描述。

function showDescrip(e)
{
    if (!e) e = window.event;
    var d = document.getElementsByClassName("Desc")[0];
    var descSpan = document.getElementById('float-description');
    var text = document.createTextNode(this._name);
    descSpan.removeChild(descSpan.firstChild);
    descSpan.appendChild(text);
    d.style.visibility="visible";
    e.stopPropagation();
 }

...

function traverse(node) {
var ul = document.createElement('ul');
if (typeof node !== 'undefined') {
    var li = document.createElement('li');
    li._name = node.name;
    var desc = document.createTextNode(node.name);
    //more code...

已编辑 新 jsfiddle用我告诉过你的关于 span 的内容。