How to make 3D text fade with OnMouseEnter?

I have 3D text for my start menu buttons. I want the text to fade between red and black when the mouse rolls over it, and I want it to go back to black when the mouse goes off of it. The fade on the script I have only works with function Update, but I don’t want it to fade all the time, only with OnMouseEnter. How can I make that happen? The script I have is posted below…

//attached to start menu buttons


var LevelSelected : String; 
var Quit : boolean = false;

var colorStart : Color = Color.black;
var colorEnd : Color = Color.red;
var colorBlack : Color = Color.black;
var duration : float = 1.0;

function OnMouseUp () {
	if(Quit){
	Application.Quit();
	}
	else
	{
	Application.LoadLevel(LevelSelected);
	}

	}
	
function OnMouseEnter (){
	  var lerp : float = Mathf.PingPong (Time.time, duration) / duration;
      renderer.material.color = Color.Lerp (colorStart, colorEnd, lerp);}
      
function OnMouseExit (){
	var lerp : float = Mathf.PingPong (Time.time, duration) / duration;
      renderer.material.color = Color.Lerp (colorStart, colorBlack, lerp);}

Try this …

#pragma strict

var startColor : Color = Color.black;
var endColor : Color = Color.red;
var duration: float = 2;

private var t: float = 1;
private var fadein : boolean;
private var fadeout : boolean;

function Start(){

renderer.material.color = Color.black;
}

function Update() {

}

function OnMouseEnter(){
	fadein = true;
	fadeout = false;
	fadeIn();
}

function OnMouseExit(){
	fadeout = true;
	fadein = false;
	fadeOut();
}

function fadeIn(){

	while(t > 0 && fadein){
	//print(t + " Fade in" + " Fade out");
		renderer.material.color = Color.Lerp(endColor, startColor, t);
		t -= Time.deltaTime/duration;
		yield;
		}
		fadein =false;
	}

function fadeOut(){

	while(t < 1 && fadeout){
	//print(t + " Fade out");
		renderer.material.color = Color.Lerp(endColor, startColor, t);
		t += Time.deltaTime/duration;
		yield;
		}
		fadeout = false;
	}