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类而不是手动更改值修复了我的问题。