mouseover : 마우스가 해당 요소 안에 들어올 때 발생하는 이벤트

mouserout : 마우스가 해당 요소를 벗어날 때 발생하는 이벤트

예제를 통해 차이를 살펴보겠습니다.

좋아요 기능을 구현 예제를 통해 설명하겠습니다.

<a href>를 클릭하면 통해 updateProInterestThumb()함수를 실행하도록 하였네요.

	   
		
		
		
		 ${pivo.prothumbcount} 
		
        

updateProInerestThumb함수는 ajax통신을 통해 값이 컨트롤러를 통해 전해지며

값이 움직이게 되요. 좋아요의 경우 db값이 'Y'es 그렇지 않는다면 'N'o로 db로 값이 변경되는데요.

//좋아요 기능 구현 
var prothumb = "${pivo.prothumb}";
function updateProInterestThumb(){
	var userid = "${user.id}";
	if(userid == ""){
		alert("로그인해야 관심상품으로 등록이 가능합니다.");
	}else{
		if(prothumb=='Y'){ 
			prothumb='N'; //console.log("1      "+prothumb);
		}else{f
			prothumb='Y'; //console.log("2      "+prothumb);
		}//console.log("3     "+prothumb);
		$.ajax({
			url : '/updateProInterestThumb',
			type : 'POST',
			data : {'code':code , 'prothumb': prothumb},
			success : function(result){
				$('#prothumbYn').html('');
				var jsonObj = JSON.parse( result );
				if(jsonObj.prothumb== "Y"){
					$('#layLike').css('display', 'block');
					$('#layLike').html("
좋아요가 되었습니다.
전체보기
");
					$("#prothumbYn").html(""+" "+jsonObj.prothumbcount+"");
				}else{
					$('#layLike').css('display', 'block');
					$('#layLike').html("
좋아요가 취소되었습니다.
");
					$("#prothumbYn").html(""+" "+jsonObj.prothumbcount+"");
				}
			}	
		});
	}
}

div태그인 id가 layLike의 css속성을 블록으로 지정해줍니다.

그러면 블록모양으로 뜨겠죠.

그러면 이제 마우스 이벤트를 주도록 하겠습니다.

$('#layLike').mouseover(function(){
	$('#layLike').css('display', 'block');
});
$('#layLike').mouseout(function(){
	$('#layLike').css('display', 'none');
});

아래의 그림과 같이 마우스 포인터가 layLike아이디를 가진 div태그 안에 있으면 css속성은 block으로 유지가 되고

마우스 포인터가 layLike의 아이디를 가진 div태그 css속성은 none으로 사라지게 됩니다.

결과는 아래와 같습니다.!

마우스 오버 아웃 이벤트 사용하시는 분들은 예제를 통해 사용해보세요!