2010-05-05 3 views
1
<html lang="en"> 
<head> 
<style> 
#thisdiv {padding:10px; margin:-15px 0 0 40px; background-color:#333; position:absolute; display:none;} 
div.block {margin-top:10px; width:200px;} 
div#thisdiv a {color:#fff;} 
</style> 
</head> 
<body> 

<div id ="one" class="block"><a href="">one</a></div> 
<div id="thisdiv">hello</div> 
<div id ="two"class="block">two</div> 
<div id ="three"class="block">three/div> 


<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script> 
$(document).ready(function() { 
    $('#one').hover(function() { 
    $('#thisdiv').fadeIn(400); 
    }); 

    $('div:not(#thisdiv)').mouseleave(function() { 
    $('#thisdiv').fadeOut(400) 
    }); 
}); 
</script> 
</body> 
</html> 

#thisdiv ne fadeOut pas. J'aurais pu utiliser ce qui suit, mais il ne disparaît que si le curseur de la souris sur #thisdiv. Y a-t-il un moyen de résoudre ce problème alors quand le curseur s'éloigne, le div disparaît.Jquery: not() sélecteur

$('#thisdiv').mouseleave(function() { 
    $('#thisdiv').fadeOut(400) 
    }); 

Je n'arrive pas à comprendre pourquoi jquery's: not selector ne fait pas ce que je voulais. Est-ce que je l'utilise à tort?

Répondre

2

1 - Vous devez utiliser mouseover, non hover pour la première fixation:

$('#one').mouseover(function() { 
    $('#thisdiv').fadeIn(400); 
    }); 

hover accepte deux paramètres de la fonction (mouseover/mouseout).

2 - Votre balise de fermeture div à la fin de votre balisage est cassé (il manque un <):

<div id ="three"class="block">three/div> <-- here 

Je l'ai testé votre code ayant fait les modifications ci-dessus, et il semble fonctionner comme vous le souhaitez à (si j'ai bien compris). Testez-le here.

+0

désolé le balisage cassé, je devais supprimer de distance balises href parce que stackoverflow ne me permettent pas d'avoir plus de 1 un href dans un post. Votre exemple de lien fonctionne bien, mais je suppose que je ne l'ai pas précisé. #thisdiv ne disparaît que lorsque je dois déplacer mon curseur sur la div et la souris. lorsque je souris sur #one, #thisdiv apparaît, mais quand je passe à # deux, #thisdiv reste toujours là. C'est le problème et en même temps, #thisdiv est un div qui a un lien pour que l'utilisateur clique. Je ne pouvais qu'utiliser: pas de sélecteur alors quand je souris vers n'importe où sauf #thisdiv, #thisdiv disparaitra. – crayfish

0

Si vous souhaitez définir explicitement l'heure, vous devrez le transmettre en tant que paramètre de hachage. Sinon, vous pouvez utiliser « lent », « rapide » ou la valeur par défaut qui est 400.

$('#my_button').mouseleave(function(){ $(this).fadeOut({duration:1000}) })