SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    757
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

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

    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
    Alex Stanford @alexstanford tumblog about.me in fb G+ K
    TechTalkin The Premier Community for Technology Enthusiasts and Professionals
    Full Ambit Media Zero Sacrifice Web Design & Development; Made in the USA @fullambit in fb G+ K

  2. #2
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    757
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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?
    Alex Stanford @alexstanford tumblog about.me in fb G+ K
    TechTalkin The Premier Community for Technology Enthusiasts and Professionals
    Full Ambit Media Zero Sacrifice Web Design & Development; Made in the USA @fullambit in fb G+ K

  3. #3
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    757
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Anyone?
    Alex Stanford @alexstanford tumblog about.me in fb G+ K
    TechTalkin The Premier Community for Technology Enthusiasts and Professionals
    Full Ambit Media Zero Sacrifice Web Design & Development; Made in the USA @fullambit in fb G+ K

  4. #4
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,370
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    just apply a css rult to your navigation links...

    a:hover {color: #FFFFFF;}

  5. #5
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    757
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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
    Alex Stanford @alexstanford tumblog about.me in fb G+ K
    TechTalkin The Premier Community for Technology Enthusiasts and Professionals
    Full Ambit Media Zero Sacrifice Web Design & Development; Made in the USA @fullambit in fb G+ K

  6. #6
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    757
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.
    Alex Stanford @alexstanford tumblog about.me in fb G+ K
    TechTalkin The Premier Community for Technology Enthusiasts and Professionals
    Full Ambit Media Zero Sacrifice Web Design & Development; Made in the USA @fullambit in fb G+ K

  7. #7
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

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

  8. #8
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    757
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JimmyP View Post
    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:

    Code Javascript:
    $('li').hover(
        function(){
             $(this).css({color:'white'}); //mouseover
        },
        function(){
             $(this).css({color:'black'}); // mouseout
        }
    );
    Jimmy, can you show me exactly how this would be implemented into the nav on the page I linked to?

    www.ahstan.com
    Alex Stanford @alexstanford tumblog about.me in fb G+ K
    TechTalkin The Premier Community for Technology Enthusiasts and Professionals
    Full Ambit Media Zero Sacrifice Web Design & Development; Made in the USA @fullambit in fb G+ K

  9. #9
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #10
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmmm It might work if you set a timeout on both events.

    Try this:

    Code JavaScript:
    $('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. #11
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    757
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JimmyP View Post
    hmmm It might work if you set a timeout on both events.

    Try this:

    Code JavaScript:
    $('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'});
      });
     }
    );
    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.
    Alex Stanford @alexstanford tumblog about.me in fb G+ K
    TechTalkin The Premier Community for Technology Enthusiasts and Professionals
    Full Ambit Media Zero Sacrifice Web Design & Development; Made in the USA @fullambit in fb G+ K

  12. #12
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    757
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.
    Alex Stanford @alexstanford tumblog about.me in fb G+ K
    TechTalkin The Premier Community for Technology Enthusiasts and Professionals
    Full Ambit Media Zero Sacrifice Web Design & Development; Made in the USA @fullambit in fb G+ K


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •