Jquery toggleClass問題

Question

最初懸停作品和「over」類被添加到mouseenter上，並在mouseout上被刪除，但是在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

爲什麼沒有兩個單獨的功能和mouseentermouseleave。有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添加類和removeClass。幾個月前我有一個懸停問題，應用css類而不是手動更改值修復了我的問題。