Javascript/JQuery Nav Button Highlighting

[jeff1evesque]

I am writing a small personal webpage (http://pubpages.unh.edu/~jmm42/JML/levesque.html# ), and am trying to write code so that when the cursor is over my navigation buttons, the buttons highlight to a gray color #404040: and the text color becomes white. I am trying to write this code in javascript using mouseover and mouseout functions. I have code that works, but it is rather long, and it is:

$('#button1').mouseover (function() {
$('a#button1').css('color', 'white');
});

$('#button1').mouseout (function() {
$('a#button1').css('color', '#404040');
});
/*
$('.button2').mouseover (function() {
$('a.button2').css('color', 'white');
});

$('.button2').mouseout (function() {
$('a.button2').css('color', '#404040');
});

$('.button3').mouseover (function() {
$('a.button3').css('color', 'white');
});

$('.button3').mouseout (function() {
$('a.button3').css('color', '#404040');
});

But there has to be a cleaner way to write this code. I have an outline of an idea, but don't know how to save current mouseover position (on navbuttonsn). Here is my outline of my idea:

/*
Idea for nav button highlight text/background on mouseOver
1. Get and save current nav button name
2. Strip to get the number value using substring
3. then use mouseover to highlight text for nav using correct identifier fro$
use mouseout to restore text color, and similarly for the background.

thisbutton =
document.getElementById('mouseovers').getElementsByTagName('.nav a');

alert('mouseover: ' +thisbutton);

$('.nav a').mouseover(function() {
$('a#button' +thisbutton).css('color', 'white');
});
*/

 

[davee123]

Do you really need a mouseover? If all you're doing is changing the CSS of the button (since it's really an anchor tag), you could just use:

div.nav a:active { color: #FFFFFF; }
div.nav a:hover { color: #D0D0D0; }
div.nav a:visited,a:link { color: #404040; }

I see you're using a:hover, already, though-- And you're mentioning something about the state? So, maybe you've already got it figured out, or you're asking about how to keep the "currently selected" link a different color on the mouseout? If so, a separate "selected" class is pretty easy to add, with its own hover, visited, etc CSS properties...

DaveE

 

[jeff1evesque]

Yeah I used CSS to get the buttons to highlight and stuff. But as the button background changes color upon the mouse being over it, the text doesn't change- even though I specified it to change to white (in the CSS: navbar.css):

div.nav a:hover {
color:white;
background:#404040;
}So, I am not sure- when I tried writing the code I specified above in javascript- it fixed the problem temporarily. For exaample if you click another button, then return and about to click about me- it works (since I left that portion of .js file intact). But then while it's active (upon click return from another button active state) and you hover over the button, the white text disappears- and just the gray background remains.Thanks,JL