Mouseover/mouseout +: pas de problème jquery

Question

J'essaye de faire un simple truc de glissement de contenu et je me suis coincé en écrivant le code pour probablement le truc le plus simple - gérer le survol de la partie navigation du curseur. Je veux qu'il en soit ainsi quand on clique sur l'un des divs avec des infos sur les diapositives, le hover ne fonctionne pas pour cela, mais fonctionne pour les deux autres divs.

J'ai essayé des classes et des ID pour la div cliquée, mais rien ne fonctionne quand j'arrive à la partie stationnaire. J'essaie d'utiliser: pas de filtre pour sélectionner les deux autres div, ou tous les trois, ceux qui n'ont pas été cliqués. Mais il n'y a pas beaucoup de sélection - quoi qu'il arrive, hover fonctionne pour les trois divs. J'ai essayé d'utiliser: pas avec d'autres fonctions, comme hide(), et ça marche très bien. Est-ce un problème de spécificité CSS? Ou est-ce quelque chose qui ne va pas avec mouseover/mouseout? Ou peut-être avec moi, comme être un imbécile incompétent?

Voici mon html:

<div id="linkswrapper"> 
    <div> 
    <a>Slide 1</a> 
    <p>Slide info 1.</p> 
    </div> 
    <div> 
    <a>Slide 2</a><p>Slide info 2.</p> 
    </div> 
    <div> 
    <a>Slide 3</a> 
    <p>Slide 3 info.</p> 
    </div> 
</div> 

Voici le code jquery:

// adds href="#" to all links in "linkswrapper" div 
$("#linkswrapper div a").attr({href: "#"}); 

// this handles clicks on the divs. When clicked, the div is assigned 
// "clicked" id, and the id attribute is removed from the other sibling divs 
$("#linkswrapper div").click(function() { 
    $(this).attr({id:"clicked"}); 
    $("#linkswrapper div").not(this).each(function(){ $(this).removeAttr("id"); }); 
}); 

// handling the mouseover/mouseout. Hover should be working on all the three divs 
// if neither of them has been clicked on or only on the two other divs if one 
// of the three has been clicked on 
$("#linkswrapper div:not(#clicked)").mouseover(function() { 
    $("a", this).css("border-color","#0066FF"); 
    $("p", this).css("color","#0066FF"); 
}).mouseout(function(){ 
    $("a", this).css("border-color","#e3e3e3"); 
    $("p", this).css("color","#cccccc"); 
}); 

Answer 1

Les événements sont affectés lorsque la page se charge et sont attribués en fonction de l'état actuel des éléments par rapport à la sélecteur fourni. En tant que tel, le gestionnaire est assigné à chacun d'eux, car aucun d'eux n'a encore l'ID #clicked. Les gestionnaires restent en place sauf si vous les supprimez.

Une autre approche consisterait à utiliser .live() ou .delegate(), de sorte que les sélecteurs sont considérés comme dynamiques lorsque les événements se produisent.

Essayez-:http://jsfiddle.net/neGgz/

$("#linkswrapper div:not(#clicked)").live('mouseover', function() { 
    $("a", this).css("border-color","#0066FF"); 
    $("p", this).css("color","#0066FF"); 
}).live('mouseout', function(){ 
    $("a", this).css("border-color","#e3e3e3"); 
    $("p", this).css("color","#cccccc"); 
}); 

• http://api.jquery.com/live/

autre approche:

• http://api.jquery.com/delegate/

---

EDIT:

Ou vous pouvez utiliser l'événement hover avec .live():

Essayez-:http://jsfiddle.net/neGgz/1/

$("#linkswrapper div:not(#clicked)").live('hover', function(e) { 
    if(e.type == 'mouseover') { 
     $("a", this).css("border-color","#0066FF"); 
     $("p", this).css("color","#0066FF"); 
    } else { 
     $("a", this).css("border-color","#e3e3e3"); 
     $("p", this).css("color","#cccccc"); 
    } 
});​ 

---

EDIT:

Ou voici une belle version courte en utilisant des classes:

Essayez-:http://jsfiddle.net/neGgz/2/

$("#linkswrapper div:not(#clicked)").live('hover', function(e) { 
    $("a,p", this).toggleClass('hovering'); 
}); 

Answer 2

Au lieu de .mouseover() et .mouseout() vous voulez utiliser mouseneter et mouseleave avec .delegate() ici, comme ceci:

$("#linkswrapper").delegate("div:not(#clicked)", "mouseenter", function() { 
    $("a", this).css("border-color","#0066FF"); 
    $("p", this).css("color","#0066FF"); 
}).delegate("div:not(#clicked)", "mouseleave", function(){ 
    $("a", this).css("border-color","#e3e3e3"); 
    $("p", this).css("color","#cccccc"); 
}); 

Alors problème est ce sélecteur: $("#linkswrapper div:not(#clicked)") trouve tout <div> dans #linkswrapper qui ne sont pas id="clicked"à ce moment-, si l'ID vient et va plus loin, cela ne change pas le fait que les événements de souris étaient déjà liés à l'élément (pas le sélecteur) plus tôt. L'utilisation de .delegate() écoute l'événement sur bulles et vérifie le sélecteur lorsque l'événement se produit, donc il se différenciera si l'élément actuellement a l'ID ou non.

Les mouseover à mouseenter et mouseout-mouseleave changements sont parce que les anciens événements auront lieu lors de l'entrée/sortie d'un enfant aussi bien, que vous habituellement ne voulez pas.

---

Comme une note de côté, cela peut être plus simple aussi bien, pas besoin de l'.each():

$("#linkswrapper div").click(function() { 
    $(this).attr({id:"clicked"}); 
    $("#linkswrapper div").not(this).each(function(){ $(this).removeAttr("id"); }); 
}); 

Comme ceci:

$("#linkswrapper div").click(function() { 
    $(this).attr({id:"clicked"}); 
    $("#linkswrapper div").not(this).removeAttr("id"); 
}); 

You can try both improvements in a demo here :)