DEVELOPE/CSS

CSS hover 사용법

소찾나 2017. 10. 26. 13:47

CSS hover 사용법

CSS hover 사용법



CSS 스타일시트 hover 는 해당 객체위에 마우스를 올려놓았을때 변화를 주어 엑티브한 페이지를 구성할때 사용됩니다


사용법은 아래에 예시를 보고 알아보도록 하겠습니다.


1 샘플보기


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
  <html>
  <head>
   <meta charset="utf-8">
   <title>CSS HOVER TEST</title>
  <style type="text/css">
    
.haver { 
width:250px ; height:250px; 
}
p:hover, h1:hover, a:hover { background-color: black; color: white; text-align:center; line-height:250px;
font-size: 150%; }​
 
  </style>
  </head>
  <body>
  <p class="haver" align="center">CSS HOVER TEST PAGE !</p>
 
  </body>
</html>
cs



css hover 를 테스트 해보기 위해 간단하게 작성해 보았고 결과는 다음과 같다


마우스를 올려놓기 전의 초기 화면이다





마우스 오버시 css haver 가 작동되어 화면이 변화된 상태


2 사용법


사용된 예제에서 <p> 테그에만 적용된 상태이지만 <h>, <a> 테그등 여러가지 html 테그등에 사용이 가능하다.


p:haver {  }  {} 안에 변화될 내용을 기입해 주면 된다.


3 관련테그


/* 아직 방문하지 않은 링크 */

a:link    { color: green; }

 

/* 이미 방문한 링크 */

a:visited { color: green; }

 

/* 마우스를 올렸을때 */

a:hover   { color: red; }

 

/* 마우스로 링크를 클릭하는 중일때 */

a:active  { color: yellow; } 

 

같은 태그지만 다른 효과를 볼수 있는데, 똑같은 태그지만 경우에 따라 각각 다른 CSS 효과를 적용하고 싶을 때도 있다. 이럴 경우 아래와 같이 코딩합니다.

 

a.link1:hover, a.link1:active { color: red; }

a.link2:hover, a.link2:active { font-size: 150%; } 


1
2
3
<p><a class="link1" href="#url">This link changes color</a></p>
<p><a class="link2" href="#url">This link changes font-size</a></p>
 
cs


이글이 도움이 되셨다면 아래에 로그인이 필요없는 공감 버튼을 클릭해주세요 ^^