Creating onmouseover function for separate div

Question

Alright I'll try to make this as clear as possible. Be kind, I'm very new to JavaScript.

I have a div container called nav, that holds five navigation buttons and they're all floated side by side. Under that container I have a div container called underbar, which is just a solid color bar under each nav element. When someone hovers on a navigation div, the color of the underbar for that element changes. Right now, I have what you see below, and it is working correctly.

<div id="container">
<div id="nav">
<div id="one" onmouseover="document.getElementById('ubone').style.background='gray'" onmouseout="document.getElementById('ubone').style.background='white';"><a href="one.html">One</a>    </div><!-- end of first nav -->
<div id="two" onmouseover="document.getElementById('ubtwo').style.background='gray'" onmouseout="document.getElementById('ubtwo').style.background='white';"><a href="two.html">Two</div><!-- end of second nav -->
<div id="three" onmouseover="document.getElementById('ubthree').style.background='gray'" onmouseout="document.getElementById('ubthree').style.background='white';"><a href="three.html">Three</div><!-- end of third nav -->
<div id="four" onmouseover="document.getElementById('ubfour').style.background='gray'" onmouseout="document.getElementById('ubfour').style.background='white';"><a href="four.html">Four</div><!-- end of fourth nav -->
<div id="five" onmouseover="document.getElementById('ubfive').style.background='gray'" onmouseout="document.getElementById('ubfive').style.background='white';"><a href="five.html">Five</div><!-- end of fifth nav -->
</div><!-- end of nav div -->

<div id="underbar">
<div id="ubone"></div><!-- end of first nav -->
<div id="ubtwo"></div><!-- end of second nav -->
<div id="ubthree"></div><!-- end of third nav -->
<div id="ubfour"></div><!-- end of fourth nav -->
<div id="ubfive"></div><!-- end of fifth nav -->
</div><!-- end of underbar div -->

</div><!-- end of container div-->

This works fine, yes. However, I absolutely hate the thought of having to go in and edit these one by one, by one. What's the easiest way to simplify this using a javascript function / jquery (preferably) while being able to do it for multiple div ids? Thoughts / opinions? Thanks!

Answer 1

This targets the div's that are a direct child of your #nav element.

$(document).ready(function(){
    $('#nav > div').mouseover(function(){

        $('#ub' + this.id).css('backgroundColor', 'grey');

    }).mouseout(function(){

        $('#ub' + this.id).css('backgroundColor', 'white');

    });
});

If you want a pure Javascript solution then try this:

window.onload = function(){

    var elements = document.querySelectorAll('#nav > div');

    for(var i=0; i<elements.length; i++)
    {
        elements[i].onmouseover = function(){
            document.querySelector('#ub' + this.id).style.backgroundColor = 'grey';
        };
        elements[i].onmouseout = function(){
            document.querySelector('#ub' + this.id).style.backgroundColor = 'white';
        };
    }
}