Question

I have a large table with with each cell being 25×25 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 the process of writing some jQuery code that will change the colour of each div when the mouse goes over it while the mouse button is down.

I currently have it so it works when I mouse over, but I only want it working when the mouse button is down aswell. I have tried many different ways to get it to work but so far I have had no look, below is my current code.

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

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