왜 mouseleave 이벤트가 작동하지 않습니까?

나는 마우스가 밖으로 이동하면 다시 원래로 이상하고 공중 선회 할 때 나는 색상을 변경하는 사업부를 원하는 완벽하게왜 mouseleave 이벤트가 작동하지 않습니까?

를 작동하는 JSFiddle 있습니다. 내 바이올린은 완벽하게 작동하지만 로컬로 실행하면 회색으로 바뀌고 원래 색상으로 돌아 가지 않습니다.

jQuery를

<script> 

    $(document).ready(function() { 
     //Logo Replacement 
     window.onresize = function (event) { 
      var screenWidth = $(window).width(); 
      if ((screenWidth) < 969 && (screenWidth) > 769) { 
       $("#logoHolder img").attr("src", "images/payday_ira_logo_stacked_web.png") 
      } 
      else { 
       $("#logoHolder img").attr("src", "images/payday_logo_long_web.png") 
      } 
     } 
     //Button Color Change 
     $("#employerButton").mouseenter(function() { 
      $("#employerButton").css({ "background-color": "grey" }); 
     }); 

     $("#employerButton").mouseleave(function() { 
      $("#employerButton").css({ "background-color": "#6EBE44;" }) 
     }); 
    }); 


</script>

CSS

#employerButton{ 
    background-color:#6EBE44; 
    height:35px; 

    border-left-width:5px; 
    border-left-style:solid; 
    border-left-color:white; 
}

HTML 내가 잘못 뭐하는 거지

<div class="d3-d6 m1" id="employerButton"> 
    Employer 
</div>

출처

2014-05-14 onTheInternet

? '#employerButton : hover'에 대한 CSS를 추가하십시오. – Barmar

Javascript 콘솔에서 오류를 확인하십시오. 바이올린에없는 로컬 버전에 오타가있을 수 있습니다. – Barmar

바이올린이 완벽하게 작동하지만 로컬에서 테스트하지 않으면 오류가 게시 된 코드와 관련되지 않은 것일 수 있습니다. 콘솔을 열고 오류가 있는지 확인하십시오. @Barmar +1 !! – adeneo

시도해 볼 수있는 몇 가지 :
1. 바이올린 코드를 로컬 저장 파일로 복사하십시오. 바이올린이 완벽하게 작동한다면 로컬에서도 마찬가지입니다. 따라서 코드가 동일해야합니다.
2. 대신 mouseout 이벤트를 사용해보십시오. 약간의 차이는 있지만 브라우저가 다르게 해석 할 수 있습니다.
3. 코드에도 몇 가지 구문 오류가 있습니다. 예를 들어 실행에 영향을 미칠 수있는 잘못된 장소에 몇 개의 세미콜론이 있습니다 - 업데이트 된 바이올린 here을 확인하십시오.

N.B : jQuery를 사용하는 경우 window.onresize에도 사용할 수 있습니다. 단지 힌트 일뿐입니다.

$(window).resize(function() { ... });

희망이 있습니다.

편집 : 원칙적으로 Barmar의 의견에 동의합니다. 가능하다면 CSS를 사용하십시오. 인터넷 사용자 중 약 10 %가 기존 브라우저 (JS 지원 없음)를 사용 중이거나 JS를 사용할 수 없으므로이 변경은 사용자의 10 %에게 적용되지 않습니다. 다시 말하지만, 이번에 CSS로 업데이트 된 바이올린 here.

$("#employerButton").mouseout(function(){ 
$("#employerButton").css({"background-color" : "#6EBE44"}); 
});

을하고 그것이 마치 마법처럼 작동합니다 :

출처

2014-05-14 17:10:06 ArtOfCode

업데이트 된 바이올린이 저에게 효과적이었습니다. 그러나 주석을 읽은 후에 CSS 솔루션을 대신 사용하겠습니다. 당신의 도움을 주셔서 감사합니다. – onTheInternet

그냥 예를 들어,하는 MouseLeave 대신로 마우스 기능을 사용합니다.

어쩌면 당신은 다음과 같은 코드를 CSS를 사용해야합니다

#employerbutton:hover{ 
    background-color : #6EBE44; 
}

왜 대신 CSS의 jQuery를 함께이 일을하는

출처

2014-05-14 17:27:02

왜 mouseleave 이벤트가 작동하지 않습니까?

답변

관련 문제