[Jquery] on 메서드, hover 메서드

on 메서드를 사용하면 여러 개의 이벤트를 묶어서 그룹화하여 사용할 수 있고 콤마로 구분한다.

 

      $(document).ready(function(){
          $("#btn").on({
              click:function(){
                $("#btn").css("color","red")
              },
              mouseover:function(){
                $("#btn").css("color","green")
              },
              mouseout:function(){
                $("#btn").css("color","blue")
              }
          })
      })

 

이때 on으로 hover 기능을 하나하나 구현할 필요 없이 hover 메서드를 사용하면 더 간단하게 사용 가능하다.

첫 번째 function에는 mouseover, 두 번째 function에는 mouseout시에 실행할 기능을 설정해준다.

      $(document).ready(function(){
          $("#my-div").hover(
              //mouseover시에 실행할 기능
              function(){
                $("#my-div").css("backgroundColor","green")
              },
              //mouseout시에 실행할 기능
              function(){
                $("#my-div").css("backgroundColor","red")
              }
          )
      })