Jquery toggleClass проблема

Question

изначально зависание работает, и класс "over" добавляется при наведении мыши и удаляется при наведении мыши, но после некоторого наведения курсора на абзацы с class = "risk" класс переключателя застревает, и mouseover удаляет его вместо добавления класса ( противоположность ожидаемой функциональности)

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

Почему бы просто не использовать метод наведения? Установите фон / z-индекс связанной точки при наведении курсора и удалите его при выходе из элемента.

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

Почему бы не иметь две отдельные функции для mouseenter и mouseleave. mouseenter добавьте класс и mouseleave удалите класс. Я думаю, проблема в том, что если, например, событие mouseleave не сработало (браузер теряет фокус, я думаю, это может вызвать это), то функция mouseenter удалит класс вместо его добавления.

Answer 3

Старайтесь не изменять значения CSS в коде, а используйте jquery для addClass и removeClass. У меня была проблема при наведении курсора пару месяцев назад, и применение классов CSS вместо ручного изменения значений устранило мою проблему.