Mouseover в то время как mousedown

У меня есть большая таблица с каждой ячейкой 25x25 и div внутри каждой. Каждый div имеет класс "node", и для них применяется цвет фона. Я в процессе написания кода jQuery, который изменит цвет каждого div, когда мышь перейдет через него, когда кнопка мыши опущена.

В настоящее время я использую его так, чтобы он работал, когда я наводил курсор мыши, но я хочу, чтобы он работал только тогда, когда была нажата кнопка мыши. Я пробовал много разных способов заставить его работать, но до сих пор я не смотрел, ниже мой текущий код.

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

Ответ 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"});
    }
  });
});

EDIT:

Вы можете сделать отдельный mousedown на .node для отдельных элементов.

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

EDIT:

Здесь используется альтернативный метод с использованием 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"});
  });

Ответ 2

Хорошо, если кнопка мыши опускается, меняет фон, и если он поднимается, изменения обратно...

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

Это то, что вы ищете?

Подробнее в http://api.jquery.com/mousedown/