鼠标按下时悬浮效果

Question

我有一个大表格，每个单元格都是25x25，里面有一个div。每个div都有“node”类，并应用了背景颜色。我正在编写一些jQuery代码，在鼠标按下时将每个div的颜色更改为鼠标经过时的颜色。

目前在鼠标悬停时它可以工作，但我只想在鼠标按下时也能工作。我已经尝试了许多不同的方法来使其工作，但迄今为止没有成功。以下是我的当前代码。

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

- Stanni

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

---

编辑：

你可能需要对 .node 进行单独的 mousedown 操作，以选择单个项目。

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

---

编辑：

这里是使用 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"});
  });

- user113716

---

+1 - 为什么没有一种检查 mousedown（以及其他状态...我们已经有了 alt、ctrl 等等的方法，为什么没有鼠标？）的方法，即使在 DOM2 中，除非我在规范中漏掉了什么。 - Nick Craver

@Stanni - 正如Nick Craver所指出的那样，如果mousedown事件开始于一个.node元素上，那么该元素将不会获得背景。这对您来说合适吗？ - user113716

@Stanni - 不用谢。:o) 我更新了我的答案，并在 .node 上添加了一个额外的 mosuedown，这样您仍然可以进行单个项目选择。 - user113716

@Stanni - 好的，还有一件事，我保证这就走人！;o) 为了全面，我添加了一个使用bind和unbind的替代版本，以防您不喜欢散布的变量。现在完成了。:o) - user113716

这更好。你是对的，我更喜欢不使用变量。再次感谢。 - Stanni