- #1
jeff1evesque
- 312
- 0
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');
});
*/
$('#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');
});
*/
Last edited by a moderator: