jQuery : toggleClass와 함께 mouseover 및 mouseout 사용

Question

클릭 가능한 영역과 클릭 할 수없는 영역이있는 작은 웹 응용 프로그램을 구축하고 있습니다. 사용자의 마우스 포인터가 클릭 가능한 영역 위에있는 동안 영역이 강조 표시되고 포인터가 손으로 바뀝니다. 또한 버튼을 클릭하면 초기에는 클릭 할 수없는 영역을 클릭 할 수 있고 그 반대의 경우도 있습니다. 이 영역에서 toggleClass 메소드를 사용하고 있습니다. 그러나이 특정 영역에 mouseover 및 mouseout 메서드를 사용할 수 없습니다.

버튼을 클릭하면 답변 표시 및 제출 탭 위로 포인터를 가져 가면 마우스 포인터와 배경색을 변경하고 다시 클릭 할 때 기본값으로 되돌리고 싶습니다. 지금 포인터를 바꿀 수 있습니다.

HTML

<div id="help" class="hover">Help</div> 
<div id="switchplayer" class="hover">Switch to Two player</div> 
<div id="showanswer">Show Answer</div> 
<div id="submit">Submit</div> 
<div id="start" class="hover">Start</div> 

<button>Click me!</button> 

jQuery를 $ ('버튼')을 클릭 (함수() { $ ('#의 showanswer, # 제출') toggleClass ('호버')를..; }});

$('.hover').mouseover(function() { 
    $(this).css('background-color','red'); 
}).mouseout(function() { 
     $(this).css('background-color',''); 
}); 

당신은이 간단한 CSS와 함께 할 수

div { 
border:1px solid black; 
} 

.hover { 
    cursor:pointer; 
    cursor:hand; 
} 

Answer 1

CSS : 예상대로

http://jsfiddle.net/cT3M9/3/

.hover:hover { 
    background-color: red; 
} 

그런 다음 그것을 작동합니다.

이 작업을 위해 자바 스크립트를 필요로하지만 이벤트를 위임 할 on를 사용해야하는 경우

:

$(document).on({ 
    mouseover: function() { 
     $(this).css('background-color','red'); 
    }, 
    mouseout: function() { 
     $(this).css('background-color', ''); 
    } 
}, '.hover'); 

http://jsfiddle.net/cT3M9/6/

Answer 2

dfsq으로이 작업을 수행하는 가장 간단한 방법은 단순히 CSS 통해, 지적한다. 그러나 코드가 작동하지 않는 이유는 mouseover 및 mouseout 메서드가 hover 클래스 인 요소에만 적용된다는 것입니다. 이러한 메서드를 실행하면이 실행됩니다. 이벤트 핸들러는 이 아니며 원래 선택 기준을 충족하는 새 요소에 소급하여 첨부됩니다. 나중에 클래스를 취득 요소에 이벤트 처리기 코드를 적용하려면, 그래서 같은 .on method의 변화를 사용

$('body').on('mouseover', '.hover', function() { 
    $(this).css('background-color','red'); 
}).on('mouseout', '.hover', function() { 
    $(this).css('background-color',''); 
});