CODEWITHSUNDEEP
javascripthtmlcsshoverdom-events
user3350333
user3350333

Reputation: 69

Proper hover effect with Javascript

I need some help with JavaScript. I am creating a small display menu, which do have a hover effect. Please check the Live Fiddle. Now I want that when I hover over book, this hover effect shouldn't happen. but when I hover other elements the hover effect will happen. I mean if I hover on bookstore or book there will be no description box, but when I hover over title / author / year / price the description tag should be displayed. All this needs to be done with JavaScript not 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;
}

Upvotes: 1

Views: 427

Answers (1)

MamaWalter
MamaWalter

Reputation: 2113

you could just put your mouseover in your if:

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

FIDDLE

Upvotes: 2

Related Questions