Jquery toggleClassの問題

Question

最初にマウスを動かすと "over"クラスがmouseenterに追加され、mouseoutで削除されますが、class = "risk"の段落をいくつかホバリングした後にトグルクラスが停止し、 mouseenterとmouseleaveための2つの別個の機能を有していないのはなぜクラス（予想される機能の反対側）

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

。 mouseenterクラスを追加して、mouseleaveクラスを削除してください。私は問題は、たとえばmouseleaveイベントが発生していない場合（ブラウザがフォーカスを失う原因と思われる）、mouseenter関数はクラスを追加するのではなく削除するということです。

Answer 2

単にホバー方式を使用しないのはなぜですか？ホバー上の関連ポイントの背景/ 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 3

コードのCSS値を変更しないでください。代わりに、jQueryを使用してaddClassおよびremoveClassを実行してください。私は数ヶ月前にホバーの問題を抱えていて、手動で値を変更する代わりにCSSクラスを適用することで、私の問題が解決されました。