JQuery : 기본함수 : mouseover / mouseout

기본함수 : mouseover / mouseout

 

 

1, Java Script 방식

<!-- JS 방식 -->
<h3 onmouseover="mouseOver()" onmouseout="mouseOut()"> mouseover in JS</h3>

java script > jQuery : 자바스크립트가 우선시 됨

<h3 class="cls" style="background-color: green;">h3 tag class cls</h3>

<script type="text/javascript">
// 자바스크립트 함수 만들기
function mouseOver() {
	alert('범위에 들어왔습니다.');
    // 마우스를 태그위에 두면 alert 호출
}

 

 

2. JQuery 방식 : 핸들러 아니고 cls로 처리함

 

// - mouseover 함수 사용
$(document).ready(function () {

	// 마우스가 태그범위 안에 들어왔을 때 호출 : mouseover
	$(".cls").mouseover(function () {
		alert('범위에 들어왔습니다.');
        
        // 태그 범위에 들어오면 css 속성 변하도록 하기
		$(".cls").css("background","#ffff00");	// 클래스명으로 접근
		$(this).css("background","#0000ff");	// 또는 this 사용 
	});
    
	
    // 마우스가 태그 범위 밖을 벗어났을 때 호출 : mouseout()
	$(".cls").mouseout(function () {
    
		$(".cls").css("background","green");	// 클래스명으로 접근
		$(this).css("background","green");	// 또는 this 사용하기 
		
	})
	
});

</script>