Web

[CSS] :link :visited :hover :active 셀렉터

알콜뭉뭉이 2017. 10. 17. 08:45

a:link   방문 전 링크
a:visited  방문 후 링크
a:active  클릭한 상태의 링크
a:hover  마우스를 올렸을때 링크


[ 샘플 1 ]

<style>
a.css_color:link { color:#ffffff; }
a.css_color:active { color:#ffffff; }
a.css_color:visited { color:#ffffff; }
a.css_color:hover { color:#ffffff; }
a.css_color:hover { color:#ffffff; font-weight:bold; }
</style>

<a href="http://www.happyjung.com" target="_blank" class="css_color">해피정닷컴</a>


[ 샘플 2 ]

<style>
.css_link { font-size: 2em; }
.css_link:hover { background-color: yellow; }
.css_color:active { background-color: red; }
.css_color:link { color: green; }
.css_color:visited { color: hotpink; }
</style>

<a href="http://www.happyjung.com" target="_blank" class="css_link">해피정닷컴</a>

<div class="css_link">안녕 div</div>
<p class="css_link">안녕 p</p>


참고자료
http://aboooks.tistory.com/88
http://www.homejjang.com/09/link_color.php 
https://zetawiki.com/wiki/CSS_:link_:visited_:hover_:active_셀렉터