使用Javascript正确悬停效果

Question

我需要JavaScript的一些帮助。我正在创建一个小的显示菜单，它有一个悬停效果。请检查Live Fiddle。现在我希望当我将鼠标悬停在 book 上时，不应该发生这种悬停效果。但当我悬停其他元素时，悬停效果将会发生。我的意思是，如果我将鼠标悬停在书店或 book 上，则不会有描述框。但当我将鼠标悬停在 title / author / year / price 上时，应显示description标记。所有这些都需要使用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