a:link, a:visited, a:hover, a:active
| a:link | 링크를 방문 하기 전이였을 때 |
| a:visited | 링크가 방문했던 사이트였을 때 |
| a:hover | 링크에 마우스를 올려놨을 때 |
| a:active | 마우스로 링크를 클릭했을 때 |
예시
<head>
<style type="text/css">
a:link{
color: royalblue;
transition: 1s;
}
a:visited {
color: red;
}
a:hover {
color: white;
background-color: blue;
}
a:active {
color:yellow;
background-color: black;
}
</style>
</head>
<body>
<a href="http://www.google.com" target="_blank">구글로 이동!</a>
</body>
실행화면
구글로 이동!
참조
transition : 시간
설정한 속성이 보여지는 시간 설정
'IT > CSS' 카테고리의 다른 글
| [CSS] div태그로 공간 나누기 (0) | 2021.06.09 |
|---|---|
| [CSS] 리스트 마커 변경하기/list-style-image/list-style-type (0) | 2021.06.09 |
| [CSS] background속성/창 크기를 줄여도 배경이미지가 잘리지 않게 하는 방법 (0) | 2021.06.09 |
| [CSS] text속성 (0) | 2021.06.09 |
| [CSS] font 속성 (0) | 2021.06.09 |