마우스 이벤트 - onmouseover / onmouseout

mouseover: 마우스 커서가 해당 요소 위에 위치할 경우에 발생한다. 요소 위에 위치할때 1회만 발생하며 연속해서 발생하지 않는다. mouseout: 마우스 커서가 해당 요소 위를 벗어날때 발생한다.

 

💐 onmouseover / onmouseout 이벤트 핸들러 1

안 녕 하 세 요

function pageColor(color){
document.bgColor = color;
}

<a href="#" onmouseover="pageColor('green')" onmouseout="pageColor('white')">안</a>
<a href="#" onmouseover="pageColor('pink')" onmouseout="pageColor('white')">녕</a>
<a href="#" onmouseover="pageColor('blue')" onmouseout="pageColor('white')">하</a>
<a href="#" onmouseover="pageColor('red')" onmouseout="pageColor('white')">세</a>
<a href="#" onmouseover="pageColor('yellow')" onmouseout="pageColor('white')">요</a>

 

💐 onmouseover / onmouseout 이벤트 핸들러 2

+ = ?

결과를 보시려면 수식(?) 위에 마우스를 올리세요.

// 두 수를 더한 값을 리턴하여 주는 함수
function sum(x, y) {
	let z = x + y;
	return z;
}    
// 결과값을 보여주는 함수
function showResult() {
	//let result = sum(10, 50);
	let num1 = parseInt(document.getElementById("number1").value);
	let num2 = parseInt(document.getElementById("number2").value);
	//if(isNaN(num1)==false && isNaN(num2)==false){
	if(!isNaN(num1) && !isNaN(num2)){ // !(부정연산자) false->true true->false
		let result = sum(num1, num2);
		document.getElementById("question").innerHTML = result;
	} else {
		document.getElementById("question").innerHTML = "숫자입력";
	}
}
// 결과값을 숨기는 함수
function hideResult() {
	document.getElementById("number1").value ="";
	document.getElementById("number2").value = "";
	document.getElementById("question").innerHTML = "?";
}

<form  name="form1" id="form1">
	<input type="text" id="number1" name="number1" placeholder="숫자입력" />
	<label>+</label>
	<input type="text" id="number2" name="number2" placeholder="숫자입력" />
	<label>=</label>		
	<span id="question" onmouseover="showResult()" onmouseout="hideResult()">?</span>
	<p>결과를 보시려면 수식(?) 위에 마우스를 올리세요.</p>
</form>

 

💐 onmouseover / onmouseout 이벤트 핸들러 3

• 우리가 수업시간에 자는 이유는?
• 도둑이 없는 도둑마을은 어딘가?
• 다섯 그루의 나무를 심으면?
• 콩쥐의 깨진 독을 수리해 준 사람은?

정답보여주기

function answerCheck(data){
	let answer = document.getElementById("answer")
	answer.style.color = "#b90000";
	answer.style.fontSize = "36px";
	answer.innerHTML = data;
}

<!-- answerCheck()로 정의 -->
<ul>
	<li onmouseover="answerCheck('꿈을 갖기 위해서')" onmouseout="answerCheck('')">우리가 수업시간에 자는 이유는?</li>
	<li onmouseover="answerCheck('교도소')" onmouseout="answerCheck('')">도둑이 없는 도둑마을은 어딘가?</li>
	<li onmouseover="answerCheck('오목')" onmouseout="answerCheck('')">다섯 그루의 나무를 심으면?</li>
	<li onmouseover="answerCheck('독수리 오형제')" onmouseout="answerCheck('')">콩쥐의 깨진 독을 수리해 준 사람은?</li>
</ul>
<div id="answer">정답보여주기</div>