WebGL onmousemove to create a rollover

Hello,

I'm creating a WebGL canvas and am trying to use the onmousemove snippet to create a rollover for a movieclip button. 

First I set the rollover state of the button to be invisible like so:

               this.YesHOT.setVisible(false);

Then I use the onmousemove function to turn make it visible when it is over the button like so:

canvas.onmousemove = function(e) { 

    var boundingRect = this.Yes.getBounds(this);

    if(isMouseOverSymbol(e.offsetX, e.offsetY, boundingRect)) {    

        this.YesHOT.setVisible(true);

    }

}.bind(this);

//Function to check whether the specified point lies within the rect.

function isMouseOverSymbol(pointX, pointY, rect) {

    if(rect.left <= pointX && pointX <= rect.left + rect.width)

        if(rect.top <= pointY && pointY <= rect.top + rect.height)

            return true;

    return false;

}

That works, but then the rollover state stays visible and won't turn back off.  How do I make it turn back off?

Any help would be appreciated.  Thanks!