при наведении курсора мыши - PullRequest
12 голосов
/ 04 июня 2010

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

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

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

1 Ответ

23 голосов
/ 04 июня 2010

Попробуйте что-то вроде этого:

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