鼠标悬停时mousedown

Question

我有一张大桌子，每个单元格为25x25，每个单元格内有一个div。每个div都有“node”类，并且背景颜色都应用于它们。我正在编写一些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和unbind的替代方法。

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

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