Fonction hover de jquery

Comment le code suivant doit-il être changé de sorte que lorsque l'événement onmouseover se déclenche, un div apparaît sur le côté droit du lien hypertexte?Fonction hover de jquery

<html> 
<head> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 

<script> 
$(document).ready(function(){ 
$('a.moreDetails').hover(function() { 
$(this).next().toggle('fast'); 
}); 
}); 

</script> 

<body> 
<a href="#" class="moreDetails">(details)</a> 
<div class="details">User 1</div> 
</body> 
</html>

Source

2010-02-03 Hulk

méthode de vol stationnaire jQuery prend deux entrées de fonction:

$("a.moreDetails").hover(
    function(){ 
    $(this).next().show('fast'); 
    }, 
    function(){ 
    $(this).next().hide('fast'); 
    } 
);

Vous semble également manquer votre tag de fermeture </head>. Pour que votre élément apparaisse à côté de votre lien, il vous faudra modifier certaines balises, manipuler le javascript ou appliquer certaines règles CSS. Vous pouvez faire ce changement mineur:

<a href="#" class="moreDetails">(details)</a> 
<span class="details">User 1</span>

Source

2010-02-03 06:29:59 Sampson

Merci ... mais comment faire apparaître à côté de l'hyperlien – Hulk

@Hulk: Vous pouvez changer d'un 'div' à un' span', ou vous pouvez ajouter 'display: inline' à son style. – Sampson

Merci ...................... – Hulk

hover() prend deux arguments: un rappel quand il est activé et un autre lorsque son désactivé si:

$("a.moreDetails").hover(function() { 
    $(this).next("div.details").stop().show("fast"); 
}, function() { 
    $(this).next("div.details").stop().show("slow"); 
});

Vous remarquerez que je vous appelle stop(). C'est une bonne habitude à prendre lorsque vous utilisez des animations, sinon vous pouvez obtenir des artefacts visuels involontaires à partir d'animations en file d'attente.

Édition: Apparaître à côté de l'élément présente certaines difficultés. Vous pouvez modifier le CSS:

div.details { display: inline; }

et il apparaîtra à côté du lien mais les effets jQuery pas vraiment correctement, car ils ont tendance à mettre les choses à display: block. Si vous ne voulez pas ou besoin de l'effet que vous pouvez simplement utiliser une classe:

div.details { display: inline; } 
div.hidden { display: none; }

puis:

$("a.moreDetails").hover(function() { 
    $(this).next("div.details").addClass("hidden"); 
}, function() { 
    $(this).next("div.details").removeClass("hidden"); 
});

Source

2010-02-03 06:29:44 cletus

Merci ... mais comment le faire apparaître à côté de l'hyperlien et non ci-dessous – Hulk

@Hulk: voir ma mise à jour. – cletus

Merci .......................... – Hulk

vol stationnaire prend 2 fonctions en tant que paramètres, pour gérer plus et à l'extérieur. vous devriez montrer dans le premier et cacher dans le second. alors votre div, à moins que sa classe ne le fasse en ligne, devrait probablement être un span

Source

2010-02-03 06:32:04

Répondre

Questions connexes