按下鼠标时将鼠标悬停 [英] mouseover while mousedown

问题描述

我有一张大桌子，每个单元格为25x25，每个单元格内都有一个div.每个div都具有节点"类，并且将背景色全部应用于它们.我正在编写一些jQuery代码，这些代码将在按下鼠标按钮的同时将鼠标移到每个div上来更改每个div的颜色.

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

推荐答案

尝试如下操作:

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

---

您可能想在.node上为单独的项目选择单独做一个mousedown.

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

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

---

这是使用bind和unbind的另一种方法.

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

这篇关于按下鼠标时将鼠标悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！