How to display items of a particular div on mouseover

Question

I have the div structure

<div id="navigate">
   <div class="menu">
       <div class="group">Mail</div>
       <div class="item">Folders</div>
       <div class="item">Messages</div>
   </div>
   <div class="menu">
       <div class="group">Contacts</div>
       <div class="item">Friends</div>
       <div class="item">Work</div>
   </div>
   <div class="menu">
       <div class="group">Setting</div>
       <div class="item">General</div>
       <div class="item">Account</div>
   </div>
</div>

Right now all items are hidden, and only divs with class 'group' is shown. What I would like to do is if I mouse over a specific menu div, only items of that menu would appear.

Right now I have this code:

function initialise()
{
    hideAllItems();

    setMouseOvers();
}

function hideAllItems()
{
    var nav = document.getElementById("navigate");
    var items = nav.getElementsByClassName("item");

    for(var i = 0; i < items.length; i++)
    {
        items[i].style.visibility = "hidden";
        items[i].style.display = "none";
    }
}

function setMouseOvers()
{
    var nav = document.getElementById("navigate");
    var menuArr = nav.getElementsByClassName("menu");

    for(var x = 0; x < menuArr.length; x++)
    {
        var itemArrs = menuArr[x].getElementsByClassName("item");

        /*var show = function(){ show(itemArrs); };
        var hide = function(){ hide(itemArrs); };*/
        menuArr[x].onmouseover=function(){ show(itemArrs); };
        menuArr[x].onmouseout=function(){ hide(itemArrs); };
    }
}

function show(itemArr)
{
    for(var i = 0; i < itemArr.length; i++)
    {
        alert(itemArr[i].innerHTML);
        itemArr[i].style.visibility = "visible";
        itemArr[i].style.display = "block";
    }
}

function hide(itemArr)
{
    for(var i = 0; i < itemArr.length; i++)
    {
        itemArr[i].style.visibility = "hidden";
        itemArr[i].style.display = "none";
    }
}

And this works, thought it only displays General and Account no matter which menu I hover over. I vaguely understand whats going wrong, but I can't see anyway to fix it. Any ideas? I do not want to change the html structure (e.g. add ids, or create specific classes) if i can help it!

possible duplicate : http://stackoverflow.com/questions/9245182/how-can-i-show-a-div-only-when-hovering-a-menu-item-or-the-div — T J, Mar 13 '14 at 13:04
possible duplicate of [Jquery: When Hover on Menu Item, Display Text](http://stackoverflow.com/questions/1276889/jquery-when-hover-on-menu-item-display-text) — T J, Mar 13 '14 at 13:06

Sebsemillia · Answer 1 · 2014-03-13T12:56:38.000

3

I know that you most probably are looking for a javascript solution, but you could use a simple CSS solution:

.group:hover ~ .item {
    display: block;
}

Working Fiddle

But be aware that it is not supported by older IE (< 8) browsers SUPPORT. It depends on your target group if you want to use it.

edited Mar 13 '14 at 12:56

answered Mar 13 '14 at 12:49

Sebsemillia

9,366
2
55
70

Fail in IE8 http://stackoverflow.com/questions/17108091/ie8-css-selector-tilde-addresses-only-first-element – Roko C. Buljan Mar 13 '14 at 12:53
Yes, you are correct. I was just researching the browser support.. ;) – Sebsemillia Mar 13 '14 at 12:57

score 2 · Answer 2 · answered Mar 13 '14 at 13:03

2

Why not simply using CSS: DEMO

.menu .item{
  display:none;
}

.menu:hover .item{
  display:block;
}

answered Mar 13 '14 at 13:03

Roko C. Buljan

196,159
39
305
313

+1 Also a nice solution, with better browser support than mine! :) – Sebsemillia Mar 13 '14 at 13:11

score 0 · Answer 3 · answered Mar 13 '14 at 13:04

As you ask for an JavaScript Only solution (no change in HTML/css) i suggest the following:
The problem is using "itemArrs" in an anonymous function, as only the latest written "itemArrs" is used for all of them, use "this" instead.

for example:

...
groups[x].onmouseover=function(){ show(this); };
...

and

function show(item) {
  var items = item.parentNode.getElementsByClassName("item");
  ...

A complete JS-only solution that works can be found here: http://jsfiddle.net/Wn4d4/3/

How to display items of a particular div on mouseover

3 Answers3