Proper hover effect with Javascript

Question

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

Have you tried not creating the "Desc" class element for book? — Tomás
– Tomás, Commented Mar 4, 2014 at 13:22
It looks like this can all be achieved in pure CSS, just in case you didn't know? — Xotic750
– Xotic750, Commented Mar 4, 2014 at 13:28

MamaWalter · Accepted Answer · 2014-03-04 13:22:52Z

2

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

answered Mar 4, 2014 at 13:22

MamaWalter

2,1131 gold badge19 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Proper hover effect with Javascript

Live Fiddle

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related