mouseover while mousedown

Question

I have a large table with with each cell being 25x25 and a div inside each one. Each div has the class of \"node\" and a background colour is applied to them all. I\'m in th

Answer 1

Try something like this:

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

---

EDIT:

You may want to do a separate mousedown on .node for individual item selections.

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

---

EDIT:

Here's an alternative method using 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"});
  });