JavaScript hover via addEventListener

Question

I have one box (#fB) and one checkbox (#chck). I'm trying to put hover on this box based on checked or unchecked checkbox.

I've written condition IF, but this hover is triggered as FALSE too. I've tried put .pointerEvents = "none"; as a FALSE, but nothing happens.

Any advice where is the problem?

Thank you very much.

document.querySelector("#chck").addEventListener("click", changer);

    var check = document.querySelector("#chck");
    var box = document.querySelector("#fB");
function changer(){
    if(check.checked){
        box.addEventListener("mouseover", function(){
            box.style.background = "green";
        });
        box.addEventListener("mouseout", function(){
            box.style.background = "purple";
        });
        
    }else{        
        box.removeEventListener("mouseover", function(){
            box.style.background = "green";
        });
        box.removeEventListener("mouseout", function(){
            box.style.background = "purple";
        });        
    }    
};