HTML CSS :link :visited :hover :active 셀렉터
페이지 정보
본문
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="https://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="https://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_셀렉터
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="https://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="https://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_셀렉터
댓글목록
등록된 댓글이 없습니다.