Jquery toggleClass issue

Question

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)

  //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

Why not have two separate functions for mouseenter and mouseleave. Have mouseenter add the class and mouseleave remove the class. I think the problem is that if for example the mouseleave event is not fired (browser looses focus I think can cause this) then the mouseenter function will remove the class instead of adding it.

Answer 2

Why not simply use the hover method? Set the background/z-index of the associated point on hover and remove it when leaving the element.

$('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

Try not to change css values in code but instead use jquery to addClass and removeClass. I had a hover problem a couple months ago and applying css classes instead of manually changing values fixed my problem.