Corretto effetto hover con Javascript: javascript, html, css, javascript-events, hover

Ho bisogno di aiuto con JavaScript. Sto creando un piccolo menu di visualizzazione, che ha un effetto hover. Si prega di controllare il violino dal vivo. Ora lo voglio quando passerò il mouse sopra libro, questo effetto al passaggio del mouse non dovrebbe verificarsi. Ma quando si passa il mouse su altri elementi, si verifica l'effetto al passaggio del mouse. libreria o libro non ci sarà una casella di descrizione. Ma quando ho il mouse sopra titolo / autore / anno / prezzo il tag di descrizione dovrebbe essere visualizzato. Tutto questo deve essere fatto con JavaScript non Jquery.

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

Grazie

risposte:

potresti semplicemente mettere il tuo mouseover nel tuo if:

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

VIOLINO