鼠标按下时鼠标悬停

Question

我有一个大表，每个单元格为 25x25，每个单元格内都有一个 div。每个 div 都具有“节点”类，并且对它们都应用了背景颜色。我正在编写一些 jQuery 代码，当鼠标按钮按下时，当鼠标移过每个 div 时，它会改变它的颜色。

我目前拥有它，所以当我将鼠标悬停时它可以工作，但我只希望它在鼠标按钮按下时也能工作。我已经尝试了许多不同的方法来让它工作，但到目前为止我还没有看，下面是我当前的代码。

$(document).ready(function(){
  $(".node").mouseover(function(){
   $(this).css({background:"#333333"});
 });
});

Answer 1

试试这样的：

$(document).ready(function(){

  var isDown = false;   // Tracks status of mouse button

  $(document).mousedown(function() {
    isDown = true;      // When mouse goes down, set isDown to true
  })
  .mouseup(function() {
    isDown = false;    // When mouse goes up, set isDown to false
  });

  $(".node").mouseover(function(){
    if(isDown) {        // Only change css if mouse is down
       $(this).css({background:"#333333"});
    }
  });
});

---

编辑：

您可能需要在 .node 上单独创建一个 mousedown 以选择单个项目。

  $('.node').mousedown(function() {
    $(this).css({background:"#333333"});
  });

---

编辑：

这是使用bind 和unbind 的替代方法。

  $(document).mousedown(function() {
      $(".node").bind('mouseover',function(){
          $(this).css({background:"#333333"});
      });
  })
  .mouseup(function() {
    $(".node").unbind('mouseover');
  });

  $('.node').mousedown(function() {
    $(this).css({background:"#333333"});
  });