jquery - 鼠标按下时鼠标悬停

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"});
    }
  });
});

---

编辑：

您可能希望mousedown对.node单个项目选择进行单独的操作。

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

---

编辑：

bind这是使用and的另一种方法unbind。

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

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