DEV/jQuery

mouseover, mouseout

purple 2020. 1. 10. 16:37

 

마우스 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>