javascript - 使用 Javascript 的正确悬停效果

Question

我需要一些 JavaScript 方面的帮助。我正在创建一个小的显示菜单，它确实具有悬停效果。请检查 Live Fiddle。现在我希望当我将鼠标悬停在 book 上时，不应出现这种悬停效果。但是当我悬停其他元素时，悬停效果就会发生。我的意思是，如果我将鼠标悬停在书店 或书 上，将不会出现描述框，但是当我将鼠标悬停在书名/作者/年份/价格 上时，应该显示描述标签。所有这些都需要使用 JavaScript 而不是 jQuery 来完成。

Live Fiddle

function traverse(node) {
    var ul = document.createElement('ul');
    if (typeof node !== 'undefined') {
        var li = document.createElement('li');
        var desc = document.createTextNode(node.name);
        var img = document.createElement("img");
        img.src = node.src;
        li.appendChild(img)
        li.appendChild(desc);
        if (node.children.length == 0) {
            li.className = "leaf";
        }
        li.onclick = clickExpand;
        li.onmouseover = showDescrip;
        li.onmouseout = hideDescrip;
        li.onmousemove = moveDescrip;

        if (typeof node.children !== 'undefined') {
            node.children.forEach(function (child) {
                li.appendChild(traverse(child));
            });
        }
        ul.appendChild(li);
    }
    return ul;
}

Answer 1

你可以把你的 mouseover 放在你的 if 中:

    if (node.children.length == 0) {
        li.className = "leaf";
        li.onmouseover = showDescrip;
        li.onmouseout = hideDescrip;
        li.onmousemove = moveDescrip;            
    }

FIDDLE