Mouseover to use parent and all children?

I have created a simple script that will make objects turn green when hovered over and then back to normal color when mouse exit. I also made it so if selected, the object turns red and stays that way. My problem arises when I have an “object” that has multiple parts, so I combine it into a parent with children and then the script no longer works. Ideally, I would like for it to turn the whole item (parent and children) green when either are moused over.

Here is the script:

#pragma strict

var selected = false;
var initialColor : Color;

function Start () {
	initialColor = renderer.material.color;

}

function Update(){
	if (selected == true) {
		renderer.material.color = Color.red;
	}

}

 function OnMouseOver() {
	renderer.material.color = Color.green;
}

function OnMouseExit() {
	renderer.material.color = initialColor;
}



function OnMouseDown() {
	if (selected == false && ItemsRemaining.items > 0) { ItemsRemaining.items--; }
	selected = true;
}

Let’s presume this script is called Boxes:

    function OnMouseOver() {
           var scan = transform;
           while(scan.parent.GetComponent.<Hazards>() != null)
                  scan = scan.parent;
           for(var hazard : Hazards in scan.GetComponentsInChildren.<Hazards>())
                  hazard.renderer.material.color = Color.green;
    }