Jquery toggleClass 문제

Question

처음에는 커서를 올리면 mouseover에서 "over"클래스가 추가되고 mouseout에서 제거되지만 class = "risk"인 단락 위로 마우스를 올려 놓으면 토글 클래스가 멈추고 마우스 오버가 추가되는 대신 제거됩니다 클래스 (예상 기능의 반대)

//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에 대한 두 개의 기능이 없습니다. 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 클래스를 적용하여 문제를 해결했습니다.