1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!DOCTYPE HTML> <html lang='ko'> <head> <title>jQuery mouseenter와 mouseleave이벤트</title> </head> <style> </style> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script> $(function(){ $(".img1").mouseenter(function(){ $(this).css({opacity : 0.5 , transition: "all .5s"}); }); }); </script> <body> <img class="img1" src="img/avatar_hat.jpg" alt="avatar_hat"> </body> </html> | cs |
공부하다가 헷갈리는 부분이있어서 정리하는 폴더를 하나 만들었다.
위의 소스코드는 mouseenter 이벤트 시 작동되는 소스코드예제이다.
<실행 화면>
mouse를 갖다 대니 위에처럼 사진이 뿌옇게 변했다. (opacity: 0.5)값을 넣어 주어서 변환된 것.
이제 mouse를 떼었을 때의 효과를 적용해보자.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <!DOCTYPE HTML> <html lang='ko'> <head> <title>jQuery mouseenter와 mouseleave이벤트</title> </head> <style> </style> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script> $(function(){ $(".img1").mouseenter(function(){ $(this).css({opacity : 0.5 , transition: "all .5s"}); }); $(".img1").mouseleave(function(){ $(this).css({opacity : 1 , transition: "all .5s"}); }); }); </script> <body> <img class="img1" src="img/avatar_hat.jpg" alt="avatar_hat"> </body> </html> | cs |
<실행 화면>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <!DOCTYPE HTML> <html lang='ko'> <head> <title>jQuery mouseenter와 mouseleave이벤트</title> </head> <style> </style> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script> $(function(){ $(".img1").on({ mouseenter : function(){ $(this).css({opacity : "0.5", transition : "all 0.4s"}); }, mouseleave : function(){ $(this).css({opacity : "1", transition : "all 0.4s"}); } }); }); </script> <body> <img class="img1" src="img/avatar_hat.jpg" alt="avatar_hat"> </body> </html> | cs |