老鼠和老鼠

Question

因此，我希望按钮在鼠标关闭时改变样式，并在鼠标上升时返回到以前的按钮。我有这样的代码：

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

问题是，当我有鼠标向下，但把它拿走我的对象，没有立即释放，字体大小和颜色保持25 is和红色。我该怎么做才能通过呢？

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

Answer 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。一旦你搬走，它就不能注册鼠标了。但离开后，它将注册一个鼠标退出事件。

Answer 2

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

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