Как приостановить setInterval при наведении курсора мыши?

$(document).ready(function() {
  var myClass = $(".myclass");

  function test() {
      $("#color").click();
  }
  
  var timerId = setInterval(test, 1000);
  
  myClass.hover(
    function() {
      window.clearInterval(timerId);
    }, function() {
      timerId = setInterval(test, 1000);
    }
  );
  
  
});

document.getElementById('color').onclick = changeColor; 
var currentColor = "red";
function changeColor() { 
  if (currentColor == "red"){ 
     document.body.style.color = "green";
     currentColor = "green";
  } else {
     document.body.style.color = "red";
     currentColor = "red";
  } 
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<button id = "color">
click
</button>

<div class = "myclass">
Mouse Hover
</div>
<div id = "myid" style = "width:30px;height:30px;">
Change color
</div>