[jQuery] 제이쿼리 hover

jquery .hover()

 

.hover(function(){요소에 마우스 올렸을 때 조건},function(){요소에 마우스가 올라가지 않았을 때})는 요소에 마우스를 올렸을때 기능을 추가하는 매소드입니다. 

 

사용법1 요소에 마우스를 올렸을 때, 마우스를 올린뒤 떨어졌을 때

$(요소).hover(function(){
//요소에 마우스를 올렸을 때 기능
//this == 요소의 글자 색을 red로 바꿔라
	$(this).css('color','red');  
	},function(){
//요소에 마우스를 올린뒤 떨어졌을때 기능
//this == 요소의 글자 색을 block으로 바꿔라    
    $(this).css('color','block');
    })

사용법2 요소에 마우스를 올렸을 때 (마우스가 벗어났을 때의 실행문이 없다)

  //마우스가 올렸을때 요소를 바꾼것이기에 마우스가 떨어져도 지속된다
  $(요소).hover(function(){
    $(this).css('color','rgb(100,20,240)');
  });

제이쿼리 없이 자바스크립트만 이용하고 싶다면

//요소 선택
var elem = document.getElementById('elem');

//addEventListener를 이용하여 접근한다.
elem.addEventListener('mouseover',function(){
	elem.setAttribute('style', 'color : red;');
});
elem.addEventListener('mouseout',function(){
	elem.setAttribute('style', 'color : black;');
});

//mouseover 요소에 마우스가 올라갔을 때
//mouseout 요소에 마우스가 올라가지 않았을 때

css만을 이용하여 hover사용

p{
color : #000;
}

p:hover{
color : rgba(255,0,0,1);
}

 

hover기능을 사용할 때 자신에게 편한걸로 사용하자

 

 

결과

See the Pen jquery .hover() by 윤재현 (@jh91) on CodePen.