Home/ Questions/Q 8148669
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T14:41:29+00:00

I am using the following code to attempt to get the font color of

  • 0

I am using the following code to attempt to get the font color of my navigation links to animate on hover/off hover. The border bottom color changes correctly but the font color does not. Also it is throwing off my current-menu-item CSS rule for a different color. The desired behavior would be for the font color to go blue on hover and revert to off white off hover, unless it is the current-menu-item which should be font color yellow. I am a novice at this so please excuse my lack of style. I have included the jQuery UI file for color support. Any help is greatly appreciated. Full example can be seen here http://www.buenolisto.com/alma

JS

        jQuery("li.social").hover(function(){
        jQuery(this).find("img").stop(true, true).animate({'marginTop': "-=20px"}, 'fast');
    }, function(){
        jQuery(this).find("img").stop(true, true).animate({'marginTop': "+=20px"}, 'fast');
    })
    jQuery("li.reservas").hover(function(){
        jQuery(this).find("img").stop(true, true).fadeOut({'marginTop': "-=30px"}, 'slow');
    }, function(){
        jQuery(this).find("img").stop(true, true).fadeIn({'marginTop': "+=30px"}, 'slow');
    })
    jQuery('ul.menu li a').hover(function() {
        jQuery(this).stop(true, true).animate({'borderBottomColor': "#2E9ECE",'color': "#FEFEFE"}, 'slow');
    }, function() {
        jQuery(this).stop(true, true).animate({'borderBottomColor': "#FFDF85",'color': "#2E9ECE"}, 'fast');
    })
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    To answer one part about the font colours. The colours are the wrong way around!

    'color':'#2E9ECE' should be in the first function inside the .hover() and #FEFEFE should be in the second function.

    The full updated code should be:

    jQuery('ul.menu li a').hover(function() {
    jQuery(this).stop(true, true).animate({borderBottomColor:'#2E9ECE', color:'#2E9ECE'}, 'slow');
    Cufon.refresh(this);
}, function() {
    jQuery(this).stop(true, true).animate({borderBottomColor:'#FFDF85', color:'#FEFEFE'}, 'fast');
    Cufon.refresh(this);
})

    Note: With the animate({}) syntax, you do not need to quote the properties.

    Edit: Second part of the question:

    To exclude the currently selected menu item from the hovering code you can update the jQuery selector to .not() include the list item with the current-menu-item class

    jQuery('ul li a:not(.current-menu-item)').hover(...)

    which should fix the second part of your problem.

    Edit 2: Since you are using Cufon to render the fonts, you need to refresh that after setting the using jQuery otherwise it will be rendered in the colour the text was originally (which is white). Adding Cufon.refresh(this); to both methods might have some effect but I can’t test it since you didn’t provide editable source code.

    After reading up on this, I don’t think Cufon fonts can be animated – see https://groups.google.com/forum/?fromgroups#!topic/cufon/RFfz6DDY0wU so you should either use CSS3 fonts, which can be animated or keep the Cufon fonts and simply have the font color change from white to blue on hover, rather than be animated.

    • 0