Question

如果我以前单击过square，并且一直将鼠标光标移到red中，则我需要var pb = document.getElementById('pb'), pq; pb.addEventListener('mousedown', function(e) { if (e.button == 0) { pb.classList.add('hover'); pq = setTimeout(function() { pb.classList.remove('hover') }, 900) } }); pb.addEventListener('mousemove', function(e) { clearTimeout(pq); pq = setTimeout(function() { pb.classList.remove('hover') }, 900) });。{p>

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

<div id="pb"></div>

green

我遇到的问题是，当我将鼠标光标移动到正方形中时，它又回到了clear，我不希望这样，因为我（应该？）timeout {{1 }}中的每个mousemove事件。

出了什么问题？

Answer 1

您需要删除在单击鼠标后删除hover类的代码，并使用mouseout事件而不是mousemove。参见下面的代码

var pb = document.getElementById('pb'),
pq;

pb.addEventListener('mousedown', function (e) {
  if (e.button == 0) {
   pb.classList.add('hover');
  }
});

pb.addEventListener('mouseout', function (e) {
  clearTimeout(pq);
  pq = setTimeout(function () {
    pb.classList.remove('hover');
  }, 900)
});

JFiddle Demo

如果先前单击的元素和鼠标移动，请保持悬停类

1 个答案: