마우스 over 전 후
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<!-- mouseover, mouseout -->
<!-- //JS -->
<!-- <h3 class="cls" onmouseover="mouseOver()"
onmouseout="mouseOut()"> h3 tag </h3> -->
<!-- //JQ -->
<h3 class="cls" style="background-color: #00ff00;"> h3 tag </h3>
<script type="text/javascript">
//JS
function mouseOver(){ //커서가 위로 올라갔을때
alert("범위에 들어 왔습니다");
}
//JQ
$(document).ready(function(){
$(".cls").mouseover(function(){
// alert("범위에 들어 왔습니다");
// $(".cls").css("background", "#ffff00");
$(this).css("background", "#0000ff"); //내가 접근한것이 cls클래스의 태그라면 적용됨
});
$(".cls").mouseout(function(){
// alert("범위에 들어 왔습니다");
// $(".cls").css("background", "#ffff00");
$(this).css("background", "#00ff00"); //내가 접근한것이 cls클래스의 태그라면 적용됨
});
});
</script>
</body>
</html>
