[jQuery] How to change text color on hover using JavaScript?

JavaScript
1

Hello,

I’m new to JavaScript, but using jQuery to power this navigation: http://www.ahstan.com

I would like the navigation’s text color to turn white on hover, but I don’t know how to make this happen using JavaScript, and can’t seem to get the CSS to have an effect while using this script.

Kind regards,
Alex

2

Edit: Nevermind, I still need help.

If I do this in CSS, it will perform like you see on my site currently, but if I could do it in JavaScript, it wouldn’t end up being black text on blue…

Can someone help?

3

Anyone?

4

just apply a css rult to your navigation links…

a:hover {color: #FFFFFF;}

5

If you go to the link, you’ll see that it is already applied, but the background is removed from the navigation without hover on the active page, so it’s black on dark blue… Also, when the backgrounds slides via JavaScript, it’s not exactly in sync with the CSS hover text color change, looking off a little. I think it would look much better if the rollover text color change was done using JavaScript.

Kind Regards,
Alex Stanford

6

Come on, somebody? It’s like onmouseover or something…

I don’t know JavaScript, but somebody here must know how to change the color of text in an li on mouseover and mouseout.

7

Yes, but if you want it to be in sync then it’s probably gonna need to be on a timeout.

This is the jQuery script for doing a basic hover:


$('li').hover(
    function(){
         $(this).css({color:'white'}); //mouseover
    },
    function(){
         $(this).css({color:'black'}); // mouseout
    }
);
8

Jimmy, can you show me exactly how this would be implemented into the nav on the page I linked to?

www.ahstan.com

9

The above JavaScript is effectively the same as using :hover in CSS. If you want there to be a delay so it’s in sync then either use a timeout or build it into the lavalamp script somehow…

The problem with using a timeout on mouseover is that if you quickly mouseover and then mouseout it will still continue to run the mouseover function after the allotted time…

10

hmmm It might work if you set a timeout on both events.

Try this:


$('ul.lavaLamp li a').hover(
 function() {
  $(this).animate({width:$(this).width()},600,
  function(){
   $(this).css({color:'white'});
  });
 },
 function() {
  $(this).animate({width:$(this).width()},600,
  function(){
   $(this).css({color:'black'});
  });
 }
);
11

Thanks Jimmy, I’m in the middle of a few projects and possibly doing a redesign, but we will still be using the same navigation, so when I do code this again I’ll try that and post back.

12

I tried this on the current layout - it does not appear to be functional. I may be implementing incorrectly, I don’t know JavaScript or it’s syntax. If someone could take a look at www.ahstan.com and give some suggestions, I’d appreciate it.