web-dev-qa-db-fra.com

jquery survoler la souris

Je veux une simple animation glisser vers le bas/haut sur la souris sur un lien. Je peux mettre la souris au travail mais je n'arrive pas à trouver comment faire pour que la souris le fasse.

Voici ce que j'ai pour l'effet de survol:

<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>

Comment puis-je obtenir cela pour déplacer la marge de 16 pixels lorsque la souris est sortie?

jqueryhover
26
Stuart Robson

L'événement de survol dans jQuery nécessite 2 fonctions de rappel: une lorsque le pointeur se déplace sur l'élément, et une lorsqu'il quitte:

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

Dans ton cas:

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

Dans les versions plus récentes de jQuery (> = 1.7), vous pouvez également adopter cette approche:

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

À mon avis, c'est une approche plus propre, et elle profite également de la nouvelle fonction .on () ( documentation ici )

20
Heath

Solution plus simple:

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