Q:

Adobe Animate CC WebGL rollover state

I'm creating a WebGL canvas and I'm 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? 

A:

You never actually make a this. YesHOT.setVisible(false) call.  If I've understood your intentions, the code should be somewhat like this:
canvas.onmousemove = function(e) { 
    var boundingRect = this. Yes.getBounds(this);
    // if mouse cursor is over the "hot" area, show effect.  Otherwise hide. 
    this. YesHOT.setVisible(isMouseOverSymbol(e.offsetX, e.offsetY, boundingRect));
}.bind(this);

// also hide the effect when mouse completely leaves the canvas
canvas.onmouseleave = function () {
    this. YesHOT.setVisible(false);
}.bind(this);

