Отключение hover

$('input[type="checkbox"]').on('click', function() { 
  $('.div').toggleClass('hover'); 
})

.div{width:50px;height:50px;background-color:lightgreen;transition:background-color.3s} 
.div.hover:hover{background-color:green}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="div hover"></div> 
<label>unbind('hover')<label> 
<input type="checkbox" />

let parrent = document.querySelector('.parrent'); 
let style=document.createElement('style'); 
style.type = 'text/css' 
style.textContent = '.box:hover{background-color:green}'; 
 
document.querySelector(".check").onchange =()=> { 
 parrent.querySelector('style') ? style.remove() : parrent.append(style); 
}

.box { 
  width: 100px; 
  height: 100px; 
  background: green; 
} 
 
.box:hover{ 
background: red; 
}

<div class="parrent"> 
  <div class="box"> 
  </div> 
  <input class="check" type="checkbox" name="switch"> 
<label for="switch">turn off hover</label> 
</div>

$(".box").hover(function(){ 
  $(".check").prop("checked") ? $(this).css("background", "blue") : $(this).css("background", ""); 
});

.box { 
width: 100px; 
height: 100px; 
background: blue; 
} 
 
.box:hover { 
background: red; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<div class="box">v2</div> 
 
<input class="check" type="checkbox" name="switch"> 
<label for="switch">turn off hover</label>