Jquery ToggleClass Ausgabe

Question

anfänglich schwebend funktioniert und die "over" -Klasse wird auf mouseenter hinzugefügt und bei mouseout entfernt, aber nach einigen Mauszeiger über Absätze mit class = "Risiko" die Toggle-Klasse bleibt stecken, und mouseover entfernt es anstelle von hinzufügen die Klasse (gegenüber der erwarteten Funktionalität)

//changes risk map point color when hovering over 
    // risk list item on right hand side 
    $("p.risk").bind("mouseenter mouseleave", function(e){ 
    $(this).toggleClass("over"); 


    var pointId= "ctl00_ContentPlaceHolderMain_" + $(this).attr("id"); 
    var pointArray = $(".riskMapPoint"); 

    for(i=0; i<pointArray.length; i++){ 
     if($(pointArray[i]).attr("id") == pointId) 
     { 
      $(pointArray[i]).css({'background-color' : '#3D698A'}); 
      $(pointArray[i]).css({'z-index' : '2'}); 
     } 
     else 
     { 
      $(pointArray[i]).css({'background-color' : '#000000'}); 
      $(pointArray[i]).css({'z-index' : '1'}); 
     } 
    } 

    }); 

Answer 1

Warum nicht zwei separate Funktionen für mouseenter und mouseleave. Haben mouseenter fügen Sie die Klasse und mouseleave entfernen Sie die Klasse. Ich denke, das Problem ist, dass, wenn zum Beispiel das mouseleave Ereignis nicht ausgelöst wird (Browser verliert Fokus ich denke, kann dies verursachen) dann die mouseenter Funktion wird die Klasse entfernen, anstatt es hinzuzufügen.

Answer 2

Warum nicht einfach die Hover-Methode verwenden? Setzen Sie den Hintergrund/Z-Index des verknüpften Punkts auf den Mauszeiger und entfernen Sie ihn, wenn Sie das Element verlassen.

$('p.risk').hover(
    function() { 
     var $this = $(this); 
     $this.addClass('over'); 
     $('.riskMapPoint') 
       .find('[id$=' + $this.attr('id') + ']') 
       .css({ 'background-color' : '#3D698A', 'z-index' : 2 }); 
    }, 
    function() { 
     var $this = $(this); 
     $this.removeClass('over'); 
     $('.riskMapPoint') 
       .find('[id$=' + $this.attr('id') + ']') 
       .css({ 'background-color' : '#000000', 'z-index' : 1 }); 
    } 
}); 

Answer 3

Versuchen Sie nicht, CSS-Werte im Code zu ändern, sondern verwenden Sie jquery, um addClass und removeClass. Ich hatte ein Hover-Problem vor ein paar Monaten und Anwendung von CSS-Klassen, anstatt manuell Werte zu ändern, behob mein Problem.