title: Creating onmouseover function for separate div
body: <p>Alright I'll try to make this as clear as possible. Be kind, I'm very new to JavaScript. </p>
  
  <p>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. </p>
  
  <pre><code>&lt;div id="container"&gt;
  &lt;div id="nav"&gt;
  &lt;div id="one" onmouseover="document.getElementById('ubone').style.background='gray'" onmouseout="document.getElementById('ubone').style.background='white';"&gt;&lt;a href="one.html"&gt;One&lt;/a&gt;    &lt;/div&gt;&lt;!-- end of first nav --&gt;
  &lt;div id="two" onmouseover="document.getElementById('ubtwo').style.background='gray'" onmouseout="document.getElementById('ubtwo').style.background='white';"&gt;&lt;a href="two.html"&gt;Two&lt;/div&gt;&lt;!-- end of second nav --&gt;
  &lt;div id="three" onmouseover="document.getElementById('ubthree').style.background='gray'" onmouseout="document.getElementById('ubthree').style.background='white';"&gt;&lt;a href="three.html"&gt;Three&lt;/div&gt;&lt;!-- end of third nav --&gt;
  &lt;div id="four" onmouseover="document.getElementById('ubfour').style.background='gray'" onmouseout="document.getElementById('ubfour').style.background='white';"&gt;&lt;a href="four.html"&gt;Four&lt;/div&gt;&lt;!-- end of fourth nav --&gt;
  &lt;div id="five" onmouseover="document.getElementById('ubfive').style.background='gray'" onmouseout="document.getElementById('ubfive').style.background='white';"&gt;&lt;a href="five.html"&gt;Five&lt;/div&gt;&lt;!-- end of fifth nav --&gt;
  &lt;/div&gt;&lt;!-- end of nav div --&gt;
  
  &lt;div id="underbar"&gt;
  &lt;div id="ubone"&gt;&lt;/div&gt;&lt;!-- end of first nav --&gt;
  &lt;div id="ubtwo"&gt;&lt;/div&gt;&lt;!-- end of second nav --&gt;
  &lt;div id="ubthree"&gt;&lt;/div&gt;&lt;!-- end of third nav --&gt;
  &lt;div id="ubfour"&gt;&lt;/div&gt;&lt;!-- end of fourth nav --&gt;
  &lt;div id="ubfive"&gt;&lt;/div&gt;&lt;!-- end of fifth nav --&gt;
  &lt;/div&gt;&lt;!-- end of underbar div --&gt;
  
  &lt;/div&gt;&lt;!-- end of container div--&gt;
  </code></pre>
  
  <p>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!</p>