Edit jQuery to Change Color of Menu

Question

My main landing page shows different images when different categories are hovered (using jQuery on my CMS page). I also want to tie into this and tell it to also change the color of the 'MENU' icon, too, depending on different image being shown (my 'menu' is a burger style created with the CSS below). How can I edit my jQuery to also call this function?

jQuery (in CMS page) for the image changing on hover:

<script type="text/javascript">// <![CDATA[
(function(){
 var backgroundImages = [
 src="{{media url="landing.jpg"}}", // default background image link
 src="{{media url="/e-store.jpg"}}", // background image for category A
 src="{{media url="/e-store.jpg"}}", // background image for category B
 src="{{media url="/home-page.jpg"}}", // background image for category C
 src="{{media url="/press.jpg"}}", // background image for category D
 src="{{media url="/contact.jpg"}}", // background image for Contact
 src="{{media url="/etc.jpg"}}", // background image for Et Cetera
 ];
 function updateBg(position){
 jQuery('.main-container').css('background-image','url('+backgroundImages[position]+')'); 
 jQuery('.skip-link.skip-nav span').css({ 
'color': '#3bcccc' 
 }); 
 }
 jQuery(document).ready(function(){
 jQuery('.nav-0').hover(function(){updateBg(1)},function(){updateBg(0)});
 jQuery('.nav-1').hover(function(){updateBg(2)},function(){updateBg(0)});
 jQuery('.nav-2').hover(function(){updateBg(3)},function(){updateBg(0)});
 jQuery('.nav-3').hover(function(){updateBg(4)},function(){updateBg(0)});
 jQuery('.nav-4').hover(function(){updateBg(5)},function(){updateBg(0)});
 jQuery('.nav-5').hover(function(){updateBg(6)},function(){updateBg(0)});
 }); 
 })();
// ]]></script>

HTML for the 'MENU':

<div class="skip-links">
 <a href="#header-nav" class="skip-link skip-nav">
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span class="icon"></span>
 <span class="label">MENU</span>
 </a>
</div>
</div

CSS for the 'MENU':

.skip-link.skip-nav span {
 display: block;
 position: absolute;
 height: 2px;
 width: 70%;
 border-radius: 9px;
 opacity: 1;
 left: 0;
 -webkit-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 -o-transform: rotate(0deg);
 transform: rotate(0deg);
 -webkit-transition: .25s ease-in-out;
 -moz-transition: .25s ease-in-out;
 -o-transition: .25s ease-in-out; 
 transition: .25s ease-in-out;
}
.skip-link.skip-nav span:nth-child(1) {
 top: 0px;
 background: #b0b0b0;
}
.skip-link.skip-nav span:nth-child(2),.skip-link.skip-nav span:nth-child(3) {
 top: 8px;
 background: #b0b0b0;
}
.skip-link.skip-nav span:nth-child(4) {
 top: 17px;
 background: #b0b0b0;
}
.skip-link.skip-nav.open span:nth-child(1) {
 top: 18px;
 width: 0%;
 left: 50%;
 background: #000;
 height: 2px;
}
.skip-link.skip-nav.open span:nth-child(2) {
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
 background: #000;
height: 2px; 
}
.skip-link.skip-nav.open span:nth-child(3) {
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -o-transform: rotate(-45deg);
 transform: rotate(-45deg);
 background: #000;
 height: 2px;
}
.skip-link.skip-nav.open span:nth-child(4) {
 top: 18px;
 width: 0%;
 left: 50%;
 background: #000;
 height: 2px;
} 
.skip-link.skip-nav .label {
 margin-top: -10px;
 color: #b0b0b0;
 margin-left: -50px;
 font-weight: bold;
}
.skip-link.skip-nav.open .label {
 display: none;
}

UPDATE:

I have updated my jQuery above which is working, but how do I change it so that bg1 is white, bg2 is black, etc? I tried listing the color options, but it didn't seem to work.

UPDATE 2:

Here is my latest jQuery:

<script type="text/javascript">// <![CDATA[
(function($){
 var backgroundImages = [
 src='{{media url="landing.jpg"}}',
 src='{{media url="/e-store.jpg"}}',
 src='{{media url="/e-store.jpg"}}',
 src='{{media url="/home-page.jpg"}}',
 src='{{media url="/press.jpg"}}',
 src='{{media url="/contact.jpg"}}',
 src='{{media url="/etc.jpg"}}',
 ];
 function updateBg(position){
 $('.main-container').css('background-image','url('+backgroundImages[position]+')');
 if (position = 1) { var color = '#3bcccc' }
 else if (position = 0) { var color = '#333333' }
 else if (position = 2) { var color = '#0dd67e' }
 else if (position = 3) { var color = '#ff852b' }
 else { var color = '#030303' } // set a default color 
 $('.skip-link.skip-nav span').css({ 
 color: color
 }); 
 }
 $(document).ready(function(){
 $('.nav-0').hover(function(){updateBg(1)},function(){updateBg(0)});
 $('.nav-1').hover(function(){updateBg(2)},function(){updateBg(0)});
 $('.nav-2').hover(function(){updateBg(3)},function(){updateBg(0)});
 $('.nav-3').hover(function(){updateBg(4)},function(){updateBg(0)});
 $('.nav-4').hover(function(){updateBg(5)},function(){updateBg(0)});
 $('.nav-5').hover(function(){updateBg(6)},function(){updateBg(0)});
 }); 
})(jQuery);
// ]]></script>

Answer 1

You can use your current function updateBg to add more CSS selectors like this:

jQuery('.main-container').css({ 
 'background-image': 'url(+backgroundImages[position]+)',
 'color': 'red' 
});

Alternatively, you could add to your existing function after the code above:

jQuery('.skip-link').css({ 
 'color': 'red' 
});

Or, create a new function and add it to your hover event listener:

jQuery('.nav-0').hover(function(){updateBg(1)},function(){updateBg(0)},function(){updateColor(1)});
function updateColor(position){
 jQuery('.skip-link').css({ 
 'color': 'red' 
 });
}

UPDATE: Okay, so you have the following code which I believe is working for you, except you want to use different colors for different "positions":

function updateBg(position){
 jQuery('.main-container').css('background-image','url('+backgroundImages[position]+')'); 
 jQuery('.skip-link.skip-nav span').css({ 'color': '#3bcccc' }); 
}

So, the easiest way (although maybe the longest) would be like this:

function updateBg(position){
 jQuery('.main-container').css('background-image','url('+backgroundImages[position]+')');
 if (position === 1) { var color = '#3bcccc' }
 if (position === 0) { var color = '#333333' }
 else { var color = '#030303' } // set a default color 
 jQuery('.skip-link.skip-nav span').css({ 'color': color }); 
}

UPDATE:

Your full code with syntax errors corrected:

<script type="text/javascript">// <![CDATA[
(function($){
 var backgroundImages = [
 src='{{media url="landing.jpg"}}',
 src='{{media url="/e-store.jpg"}}',
 src='{{media url="/e-store.jpg"}}',
 src='{{media url="/home-page.jpg"}}',
 src='{{media url="/press.jpg"}}',
 src='{{media url="/contact.jpg"}}',
 src='{{media url="/etc.jpg"}}',
 ];
 function updateBg(position){
 $('.main-container').css('background-image','url('+backgroundImages[position]+')');
 if (position === 1) { var color = '#3bcccc' }
 else if (position === 0) { var color = '#333333' }
 else { var color = '#030303' } // set a default color 
 $('.skip-link.skip-nav span').css({ 
 color: color
 }); 
 }
 $(document).ready(function(){
 $('.nav-0').hover(function(){updateBg(1)},function(){updateBg(0)});
 $('.nav-1').hover(function(){updateBg(2)},function(){updateBg(0)});
 $('.nav-2').hover(function(){updateBg(3)},function(){updateBg(0)});
 $('.nav-3').hover(function(){updateBg(4)},function(){updateBg(0)});
 $('.nav-4').hover(function(){updateBg(5)},function(){updateBg(0)});
 $('.nav-5').hover(function(){updateBg(6)},function(){updateBg(0)});
 }); 
})(jQuery);
// ]]></script>

• itsk2015: firstly, thank you!! I have been struggling with this for almost a week now and this is by far the closest i've got!! Completely appreciate your help. The middle option seemed to work for me, however how do I give other color options? I.e. Bg1 is black, bg2 is white? I will update my code above...
• itsk2015: also, it might be worth noting that i tried to list the color options similar to the image options, but this didn't work. I'm so close yet can't figure this little bit out... :)
• itsk2015: any help you can give is extremely appreciated - sorry to bombard, I have a deadline and need to get this finished tonight. I just don't know where to go from here.
• Tim Hallman: Just put those in your functions. I'll update my answer with an example.
• itsk2015: Thank you! I copied the function exactly as you had it above but it just seems to pick up the default color...