2009-07-12 54 views
27

我想要一個簡單的向下/向上滑動鼠標滑過鏈接。我可以將鼠標移到工作位置,但我無法弄清楚如何讓鼠標移動到該位置。jquery hover mouse out

這裏是我有懸停效果:

<script type="text/javascript" src="http://www.google.com/jsapi"></script> 

<script type="text/javascript"> 

google.load("jquery", "1.3.2"); //load version 1.3.2 of jQuery 

google.setOnLoadCallback(function() { 
    jQuery(
     function($) { 
      $("a.button").hover(function(){$(this).animate({"marginTop": "0px"}, "fast") 

     }); 
    }); 
}); 
</script> 

我如何得到這個移動的利潤率高達16像素時鼠標呢?

+0

本例中的代碼是無效的優勢!也許你錯過了`.hover(func,func)`的第二個函數? – Boldewyn 2009-07-12 16:29:20

回答

76

jQuery的懸停事件需要2個回調函數:一是當它離開在該項目上的指針移動,以及一個:

$(item).hover(function() { ... }, function() { ... }); 

你的情況:

$("a.button").hover(
    function() { 
     $(this).animate({"marginTop": "0px"}, "fast"); 
    }, 
    function() { 
     $(this).animate({"marginTop": "16px"}, "fast"); 
    } 
); 
+0

這太棒了! – Mike 2012-08-17 15:00:42

+0

史詩般的答案之一! – 2016-06-22 16:12:52

1

簡單的解決方案:

$("a.button").hover(function() { 
    $("a.button").css("cursor","pointer"); 
}); 
18

在較新版本的jQuery(> = 1.7)中,您也可以採用這種方法:

$("a.button").on('mouseenter',function(){ 
    $(this).animate({"marginTop": "0px"}, "fast"); 
}); 
$("a.button").on('mouseleave',function(){ 
    $(this).animate({"marginTop": "16px"}, "fast"); 
}); 

在我看來,這是一個更簡潔的方法,而且還採取了新的。對()函數(documentation here