Mouseup 和 Mousedown答案

【问题标题】：Mouseup and MousedownMouseup 和 Mousedown
【发布时间】：2013-01-08 03:48:48
【问题描述】：

所以我希望按钮在鼠标按下时改变样式，并在鼠标上升时返回上一个。我有这个代码：

$('#divMenu > #menu li a').mousedown(function(){
  $(this).css({
  'font-size': '25px',  
  'color': 'red'     
  });               
}).mouseup(function(){
  $(this).css({
  'font-size': '30px',  
  'color': 'black'     
  });               
});

问题是，当我按下鼠标但将其从我的对象上移开而不立即释放时，字体大小和颜色将保持 25 像素和红色。我该怎么做才能通过呢？

编辑： JsFiddle 在这里：http://jsfiddle.net/h64Uz/

【问题讨论】：

你能发一个 JsFiddle 吗？也有 HTML？

标签： jquery mousedown mouseup

【解决方案1】：

您还需要使用鼠标移出。

$('#divMenu > #menu li a').mousedown(function(){
  $(this).css({
  'font-size': '25px',  
  'color': 'red'     
  });               
}).mouseup(function(){
  $(this).css({
  'font-size': '30px',  
  'color': 'black'     
  });               
}).mouseout(function(){
  $(this).css({
  'font-size': '30px',  
  'color': 'black'     
  });               
});

您的事件代码在单击鼠标时设置 css。一旦你离开它就不能注册鼠标。但是在离开时它会注册一个 mouseout 事件。

【讨论】：

工作得很好，真的没有想到这一点，真丢人。无论如何，谢谢你，先生
mouseout() 将在鼠标离开子元素时触发，这通常是不可取的。 mouseleave() 更好。见：stackoverflow.com/questions/4258615/…
很高兴帮助@KubaPolaczek

【解决方案2】：

jQuery 有一个mouseleave() 事件，您可以使用它来补充现有代码：

【讨论】：

【解决方案3】：

这应该可以工作（假设您使用的是jQuery 1.7 或更高版本）：

$('#divMenu > #menu li a').on("mousedown", function () {
  $(this).css({
    'font-size': '25px',
      'color': 'red'
  });
}).on("mouseup mouseout", function () {
  $(this).css({
    'font-size': '30px',
      'color': 'black'
  });
});

【讨论】：