jQuery mouseover from an array
<p>I have made a div called navarea and inside it I have 6 more div's. When I mouse over I want to change there background color.</p>

<p>I dont want to have 6 mouse over functions for each div, instead I want to get the names of the divs from an array.</p>

<p>I can change the background colour without the mouseover function in this way, but as soon as I add the mouseover function it does absolutely nothing.</p>

<p>Thank you in advance for you help.</p>

<p>Bill</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;script src="jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;

&lt;script type="text/javascript"&gt;
$(document).ready(function() {



var mainnav=["dashboard","sales","marketing","production","accounts","logout"];


jQuery.each(mainnav, function() {

$("#" + this).mouseover(function(){ // Why is this line is failing?
$("#" + this).css("background-color","#8c9aa0");
});  

});


});
&lt;/script&gt;

&lt;style type="text/css"&gt;
#navarea {
height: auto;
width: 180px;
background-color:#FFF;
}

#dashboard {
height: auto;
width: 180px;
background-color:#FFF;
}


&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div id="navarea"&gt;
&lt;div id="dashboard"&gt;Dashboard&lt;/div&gt;
&lt;div id="sales"&gt;Sales&lt;/div&gt;
&lt;div id="marketing"&gt;Marketing&lt;/div&gt;
&lt;div id="production"&gt;Production&lt;/div&gt;
&lt;div id="accounts"&gt;Accounts&lt;/div&gt;
&lt;div id="logout"&gt;Logout&lt;/div&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
