使用 Javascript 正确悬停效果

Question

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

现场小提琴

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;            
    }

小提琴