[jQuery] hover()

WEB/jQuery

[jQuery] hover()

춘햄 2021. 6. 2. 15:14

hover() 메서드는 hover(함수1, 함수2)와 같이 사용하여, mouseover일 때 함수1, out일 때 함수2를 번갈아 가며 사용할 수 있게 해주는 메서드이다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>hover()로 마우스오버와 아웃을 동시 처리</title>

    <style type="text/css">
        .hover { cursor:hand; background-color:Yellow; }
    </style>

    <script src="jquery-1.6.2.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {
			//hover(함수, 함수)는 mouseover <=> mouseout 기능을 번갈아가며 사용 가능
        	$('table tr:eq(1)').hover(over, out);
			
			function over() {
				$(this).addClass('hover')
			}
			
			function out() {
				$(this).removeClass('hover')
			}
			
        });
    </script>
</head>
 
<body> 

<table border="1">
    <tr><td>제목</td></tr>  		<!-- 0번 -->
    <tr><td>ASP.NET</td></tr>     <!-- 1번 -->
    <tr><td>ASP.NET</td></tr>	  <!-- 2번 -->
</table>  
  
</body>
</html>