jQuery / Method / .hover()
.hover()
.hover()로 선택한 요소에 마우스 포인터를 올렸을 때, 그리고 마우스 포인터가 그 요소를 벗어났을 때 어떤 효과를 넣을 수 있습니다.
문법
.hover( handlerIn(eventObject), handlerOut(eventObject) )
handlerIn(eventObject)에는 요소에 마우스 포인터를 올렸을 때의 효과를, handlerOut(eventObject)에는 마우스 포인터가 요소를 벗어났을 때의 효과를 넣습니다.
예제
span 요소에 마우스 포인터를 올리면 글자가 커지고, 포인터가 벗어나면 다시 원래대로 돌아옵니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> span { padding: 10px; border: 1px solid #bcbcbc; cursor: pointer; } </style> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> $( document ).ready( function() { $( 'span' ).hover( function () { $( this ).animate( { fontSize: '50px' }, 500 ); }, function () { $( this ).animate( { fontSize: '1em' }, 500 ); } ); } ); </script> </head> <body> <p>Lorem <span>Ipsum</span> Dolor</p> </body> </html>