start timer on mouse out interrupt timer on mouseover javascript

Question

im trying to make a volume bar for a video. the concept is that when you click the volume button, a div appears, and you can control the volume level with it. when you hover out from the div a counter starts counting down from 7 and makes the div disappear. however, if the counter started and you hover back on the volume controler, the counter is stopped. I dont know how to interrupt the timer from counting down. any input?

this is what i got so far.

  //event for volume bar
  volumeC.addEventListener("mouseover", function(){
    volumeC.style.display = 'inline-block';
  });

  volumeC.addEventListener("mouseout", function(){
     timer = setTimeout(function () {
        volumeC.style.display = 'none';
      }, 7000);
  });

Answer 1

You need to clear timeout with clearTimeout put in mouseover handler:

var timer;

volumeC.addEventListener("mouseover", function () {
    clearTimeout(timer);
    volumeC.style.display = 'inline-block';
});