javascript - 如何在鼠标悬停时更改 setInterval() 回调函数不断修改的元素的值？

Question

我是一个使用番茄钟的初学者。目前，您按下启动计时器的按钮会在激活后变为当前剩余时间。

我想包括的功能之一是，用户可以将鼠标悬停在剩余时间上以隐藏它并显示“暂停”一词，而不会中断后台的计时器。

据我了解，我需要使用 JS(可能是 jquery .hover())来执行此操作。我对实现这个的困惑是我只希望在计时器运行时可以进行这种交互，也就是每秒被覆盖的时候。当我使用 setInterval() 每秒调用一个函数时，我需要(据我所知)在 setInterval 回调函数中定义悬停函数。然而，这会产生意想不到的结果，而且根本不是预期的结果。

我想到的另一种方法是在用户将鼠标悬停在计时器上时显示一个隐藏的 div，它在计时器上具有绝对定位。但我不确定如何实现。

如果有人能帮助我实现这一目标，我将不胜感激。

密码笔:http://codepen.io/meek/pen/zradga

function activateTimer() {
    if(inProgress===false) {
      inProgress = true;
      updateTimer(sSession);
      interval = setInterval(function() {
        if(sSession>0) {
          // session time!
          focusSession();
          sSession -= 1;
          updateTimer(sSession);
        }
        else {
          // break time!
          if(sBreak>1) {
            focusBreak();
            sBreak -= 1;
            updateTimer(sBreak);
          }
          // this prevents a one second delay when break reaches 0 by not running the whole setInterval() callback function once without changing a value.
          else if (sBreak==1){
            // start a new session
            sBreak -= 1;
            updateTimer(sBreak);
            sSession = session*60;
            sBreak = breaks*60;
          }
        }
      }, 1000);

      // change hover effect
      $('#timer').removeClass('hovergreen');
      $('#timer').addClass('hoverred');
    }
    else {
      inProgress = false;
      clearInterval(interval);

      // change hover effect
      $('#timer').removeClass('hoverred');
      $('#timer').addClass('hovergreen');
    }
  }

这是一个巨大的函数怪物，目前包含了计时器的大部分功能。

Answer 1

对您的 HTML 进行简单更改(添加一个带有 pause 类的 div):

<div class="meter">
   <div class="pause">Pause</div>
   <div class="meter-container"></div>
   <div class="base"></div>
   <div id="timer" class="timer btn hovergreen">START</div>
</div>

然后添加这个 CSS:

.meter{
    position: relative;
}
.meter .pause{
    position: absolute;
    display: none;
}
.meter:hover .meter-container, .meter:hover .base, .meter:hover .timer{
    visibility: hidden;
}
.meter:hover .pause{
    display: block;
}