Jquery toggleClass issue
<p>initially hovering works and the "over" class is added on mouseenter and removed on mouseout, but after doing some hovering over paragraphs with class="risk" the toggle class becomes stuck, and mouseover removes it instead of adding the class (opposite of expected functionality)</p>

<pre><code>  //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&lt;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'});
        }
     }

    });
</code></pre>
