Latest posts from topic “[solved] Changing font color (not background) on rollover”

Re: [solved] Changing font color (not background) on rollover

2010-02-26T18:45:05Z

css in itself might not even help in this matter either, if you're not aware what CSS properties to use. but as a general rule, if you're going to use text replacement stuff, better get prepared in not changing its appearance just as easily as when dealing with simple text.

Re: [solved] Changing font color (not background) on rollover

2010-02-26T08:27:29Z

exactly... so I'm going to have to use CSS. *sigh*
Thanks

Re: [solved] Changing font color (not background) on rollover

2010-02-26T00:55:07Z

ah no wonder. because of typeface.js or cufon.js, it would be hard to manipulate it by using the "color" property since we're dealing with canvas or svg or flash or whatever was replaced with the simple text.

Re: [solved] Changing font color (not background) on rollover

2010-02-25T21:28:56Z

wowenkho,

I believe the reason the mouseenter and mouseleave effect is not working properly for me is because I am using typeface.js to embed a custom font face with out using an image ( http://typeface.neocracy.org/) This is just my theory... Is there a working around this problem with mootools or will I have to result in using a CSS hover?

Re: Changing font color (not background) on rollover

2010-02-25T10:04:04Z

Hi wowenkho,

The code does seem to be working in mooShell... obviously I am doing something wrong and will take another shot at it.

Thanks for your help.

Re: Changing font color (not background) on rollover

2010-02-24T22:53:13Z

well, if that's the case, the code should work... anyway here: http://mootools.net/shell/wZ7Pu/

Re: Changing font color (not background) on rollover

2010-02-24T21:57:29Z

Hi wowenkho,

Thank you for your suggestion. The Javascript is still now working properly. I forgot to include the HTML in my previous post.
In order to change the background color on mouse enter I would use "backgroundColor" what would i use to change the font color on mouse enter "color" or "font-color" or neither?

Line number On/Off | Expand/Contract | Select all

 
 id="Nav_wrapper"> 
         href="#" class="typeface-js" title="Begin">Begin 
         href="#" class="typeface-js" title="Portfolio">Portfolio 
         href="#" class="typeface-js" title="About">About 
         href="#" class="typeface-js" title="Blog">Blog 
         href="#" class="typeface-js" title="Contact">Contact        

Re: Changing font color (not background) on rollover

2010-02-23T21:27:33Z

Line number On/Off | Expand/Contract | Select all

window.addEvent('domready', function(){
       //select all a element from your page
    var list = $$('#Nav_wrapper .typeface-js');
    list.each(function(element) {
    // We change the default 'link' property to 'cancel' for the morph effect,
    // this will ensures effects are interrupted when the mouse is leaving
    // and entering, so the morph effect being called begin immediately
    element.set('morph', {link : 'cancel'});
    var oldcolor = element.getStyle('color');
   // on mouse enter on our element we put in oldcolor the current color
   // and we morph to #aaa the result is a fading effect from the font color to #aaa
   // (you can use morph with any css property)
    element.addEvent('mouseenter', function(){
        element.morph({
            'color': '#b53832'
        });
    });
   // on mouse leave on our element we morph back to oldcolor
  // the result is a fading effect on font color from #aaa to oldcolor
    element.addEvent('mouseleave', function(){
        element.morph({
            'color': oldcolor
        });
    });
  });
});

[solved] Changing font color (not background) on rollover

2010-02-23T20:53:31Z

I am trying to change the font color on rollover for a navigation I am put together with mootools. I know how to change the background color but how do you change the font color?

I don't want to list my navigation.

Here is what I have:

Line number On/Off | Expand/Contract | Select all

window.addEvent('domready', function(){
   //select all a element from your page
  var list = $$('#Nav_wrapper .typeface-js');
  list.each(function(element) {
  // We change the default 'link' property to 'cancel' for the morph effect,
  // this will ensures effects are interrupted when the mouse is leaving
  // and entering, so the morph effect being called begin immediately
  element.set('morph', {link : 'cancel'});
  oldcolor=element.getStyle('#122c3c');
 // on mouse enter on our element we put in oldcolor the current color
 // and we morph to #aaa the result is a fading effect from the font color to #aaa
 // (you can use morph with any css property)
  element.addEvent('mouseenter', function(){
    element.morph({
      'color': '#b53832'
    });
  });
 // on mouse leave on our element we morph back to oldcolor
 // the result is a fading effect on font color from #aaa to oldcolor
  element.addEvent('mouseleave', function(){
    element.morph({
      'color': oldcolor,
    });
  });
  });
});