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

Answer 2

$(".myClass").mouseover(function() {
    $('#ub' + this.id).css('background-color', 'gray');
  }).mouseout(function(){
     $('#ub' + this.id).css('background-color', 'white');
  });

Answer 3

Here's an answer with a working DEMO:

http://jsfiddle.net/AVk6k/1/

And using jQuery .hover() instead. .hover() is like a shorthand that combines .mouseenter() and .mouseleave() into one handler.

IMHO, mouseenter and mouseleave are much more reliable than mouseover and mouseout, which tend to flicker.

jQuery:

$(document).ready(function() {
    $('#nav div').hover(
    function() {
        $('#ub' + this.id).css('background-color', 'grey');
    }, function() {
        $('#ub' + this.id).css('background-color', 'white');
    });
});​

You also had some missing </a> tags.

HTML:

<div id="container">
    <div id="nav">
        <div id="one"><a href="one.html">One</a></div><!-- end of first nav -->
        <div id="two"><a href="two.html">Two</a></div><!-- end of second nav -->
        <div id="three"><a href="three.html">Three</a></div><!-- end of third nav -->
        <div id="four"><a href="four.html">Four</a></div><!-- end of fourth nav -->
        <div id="five"><a href="five.html">Five</a></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-->​

Answer 4

All solutions provided uses jQuery to achieve what you want. Using plain Javascript (which is much faster), use this approach:

<script type="text/javascript">
function hoverMenu(elem)
{
    document.getElementById('ub' + elem.id).style.background='gray';
}

function blurMenu(elem)
{
    document.getElementById('ub' + elem.id).style.background='white';
}
</script>

<div id="container">
    <div id="nav">
        <div id="one" onmouseover="hoverMenu(this);" onmouseout="blurMenu(this);"><a href="one.html">One</a>    </div><!-- end of first nav -->
        <div id="two" onmouseover="hoverMenu(this);" onmouseout="blurMenu(this);"><a href="two.html">Two</div><!-- end of second nav -->
        <div id="three" onmouseover="hoverMenu(this);" onmouseout="blurMenu(this);"><a href="three.html">Three</div><!-- end of third nav -->
        <div id="four" onmouseover="hoverMenu(this);" onmouseout="blurMenu(this);"><a href="four.html">Four</div><!-- end of fourth nav -->
        <div id="five" onmouseover="hoverMenu(this);" onmouseout="blurMenu(this);"><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-->

Answer 5

$("#nav").on("mouseover", "div", function() {
    $('#ub' + this.id).css('backgroundColor', 'gray');
}).on("mouseout", "div", function() {
    $('#ub' + this.id).css('backgroundColor', 'white');
});

Answer 6

Edit: Misread the question. Here is my amended answer.

I would suggest a more semantically correct markup. As your navigation is effectively a list of links, it is generally standard practice to style it as such:

<ul id="nav">
  <li rel="#ubone"><a href="mypage1.html">One</a><li>
  <li rel="#ubtwo"><a href="mypage2.html">Two</a><li>
  <li rel="#ubthree"><a href="mypage3.html">Three</a><li>
  <li rel="#ubfour"><a href="mypage4.html">Four</a><li>
</ul>

This does require a little extra styling to remove the default list styles, but results in a navigation that makes more sense to Google web crawlers, and follows good coding practices. If in doubt, here is a start on the css:

#nav {margin:0; padding:0;}
#nav li {list-style:none; float:left; padding:5px 10px; background:#FFF;}
#nav a {color:#000; text-decoration:none;}

To answer your original question you can add the behaviour using jQuery like this:

$(document).ready(function(){
  // The document ready waits for the document to load before adding JS to the elements
  // We use the css selector for our element to select it, then use the hover function to apply a behaviour
  $('#nav li').hover(function(){
    // This function executes when the mouse hovers over the li
    var target = $(this).attr('rel');
    $(target).css({
      'background' : '#ccc'
    });
  }, function(){
    // This function executes when the mouse leaves the li
    var target = $(this).attr('rel');
    $(target).css({
      'background' : '#fff'
    });        
  });
});

If you need more help with jQuery, head over to http://api.jquery.com/ where they have some excellent in depth documentation.

N.B. - Without seeing the actual styles you're applying I can't be sure, but it sounds like your underbar could also be accomplished by adding a bottom border and then changing the colour on hover using the ":hover" css pseudo-class.