[CSS] 선택자 :Hover

:hover란

 

:hover는 html에서 요소에 마우스를 올렸을 때 반응하게 하는 css요소이다.

javascript 혹은 jquery의 조건으로도 사용가능한 요소이다.

 

마우스로 반응 하기에 모바일이나 테블릿에서는 효과를 적용하기가 쉽지 않다.

 

:hover 적용 방법

 

css파일에서 이벤트를 적용하고 싶은 위치에 :hover를 선언해주고 나머지 코드를 작성하면 된다

 

 

 

코드

 

[css]
/*초기화*/
*{margin: 0 auto; padding: 0;}

/*기본셋팅*/
h1, p, button, div{
  border : 1px solid black;
  width : 300px;
  height : 70px;
  text-align : center;
  line-height : 70px;
  font-size : 15px;
  display : block;
  margin-bottom : 15px;
  margin-top : 15px;
  transition : 3s;   
}

/*조건을 특정하지 않으면 모든 요소에 적용된다.*/
/*h1위에 올렸을때*/
h1:hover{
  color : red;
  transition : 3s;   
}
/*p위에 올렸을때*/
p:hover{
  background-color : rgb(50,50,255);
  color : white;
  transition : 3s;  
}
/*button위에 올렸을때*/
button:hover{
  font-size : 10px;
  transition : 3s;
}
/*div위에 올렸을때*/
div:hover{
  transition : 3s;
  transform: scale(1.5);
}

실행

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