-
jQuery - .hover()jQuery 2020. 6. 23. 16:52
.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>
'jQuery' 카테고리의 다른 글
jQuery - jQuery.inArray() (0) 2020.06.23 jQuery - .html() (0) 2020.06.23 jQuery - .hide() (0) 2020.06.23 jQuery - .has() (0) 2020.06.23 jQuery - .get() (0) 2020.06.23