Page 1 of 1
[solved] Changing font color (not background) on rollover
Posted:
Wed Feb 24, 2010 4:53 amby jrealist1
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:
-
- 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,
- });
- });
- });
-
- });
-
Re: Changing font color (not background) on rollover
Posted:
Wed Feb 24, 2010 5:27 amby wowenkho
- 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
- });
- });
- });
- });
Re: Changing font color (not background) on rollover
Posted:
Thu Feb 25, 2010 5:57 amby jrealist1
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?
-
- <!--- begin nav wrapper -->
- <div id="Nav_wrapper">
- <a href="#" class="typeface-js" title="Begin">Begin</a>
- <a href="#" class="typeface-js" title="Portfolio">Portfolio</a>
- <a href="#" class="typeface-js" title="About">About</a>
- <a href="#" class="typeface-js" title="Blog">Blog</a>
- <a href="#" class="typeface-js" title="Contact">Contact</a>
- </div><!--end nav wrapper-->
Re: Changing font color (not background) on rollover
Posted:
Thu Feb 25, 2010 6:53 amby wowenkho
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
Posted:
Thu Feb 25, 2010 6:04 pmby jrealist1
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: [solved] Changing font color (not background) on rollover
Posted:
Fri Feb 26, 2010 5:28 amby jrealist1
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: [solved] Changing font color (not background) on rollover
Posted:
Fri Feb 26, 2010 8:55 amby wowenkho
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
Posted:
Fri Feb 26, 2010 4:27 pmby jrealist1
exactly... so I'm going to have to use CSS. *sigh*
Thanks
Re: [solved] Changing font color (not background) on rollover
Posted:
Sat Feb 27, 2010 2:45 amby wowenkho
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.