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

为什么不简单地使用悬停方法？设置悬停时关联点的背景/ z-index，并在离开元素时将其删除。

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