평소에는 링크 텍스트에 밑줄을 넣지 않다가, 마우스가 그 위를 지나갈 때(호버)에만 밑줄(언더라인)을 넣는 방법입니다. 링크에 항상 밑줄이 있는 것이 기본값이지만, 그러면 가독성이 떨어지기에, 마우스가 지날 때에만 밑줄을 넣는 방법이 많이 사용됩니다.
또한, 마우스를 가져가면, 링크 텍스트를 빨간색으로 변경시켜 알아보기 쉽게 하는 법도 있습니다.
a:link 는 보통 때의 링크 텍스트의 스타일이고
a:visited 는 이미 방문한 적이 있는 링크의 스타일이고
a:hover 는 마우스가 링크 위를 스쳐 지날 때의 색깔이고
a:active 는 좀 모호한데, 링크를 완전히 클릭하지 않고, 마우스로 선택만 해 둔 상태의 스타일입니다.
마우스 호버 때에만, 링크에 언더라인, 색상 변경 예제
파일명: example.html
<html>
<head>
<style type="text/css">
/*
기본값 + 마우스 가져가면 링크 텍스트를 빨간색으로 변경
모든 링크들에 일괄적으로 적용됩니다.
*/
a:link { text-decoration:underline; color:#8600E4 }
a:visited { text-decoration:underline; color:#800080 }
a:hover { text-decoration:underline; color:#FF0000 }
a:active { text-decoration:underline; color:#FF0000 }
/*
마우스 가져갔을 때에만, 링크 텍스트에 밑줄 넣기
no-uline 이라는 클래스를 지정한 링크에만 적용됨
*/
a.no-uline:link { text-decoration:none }
a.no-uline:visited { text-decoration:none }
a.no-uline:hover { text-decoration:underline }
a.no-uline:active { text-decoration:none }
</style>
</head>
<body>
<!-- 기본 스타일 + 마우스 가져가면 링크 텍스트를 빨간색으로 변경 -->
<a href="http://www.google.co.kr/">Google 검색</a>
<br />
<!--
a.no-uline 클래스를 이용하여,
마우스 가져갔을 때에만 밑줄 표시하기 + 링크 텍스트를 빨갛게 표시
-->
<a href="http://www.google.co.kr/" class="no-uline">Google 검색</a>
</body>
</html>
출처:http://mwultong.blogspot.com/2007/02/html-css-mouse-hover-underline.html
'프로그램 관련 > jquery&jsp&HTML' 카테고리의 다른 글
| jquery 노드찾기, jquery 접근자 (0) | 2019.01.29 |
|---|---|
| a 태그 색상넣기, 색 넣기 (0) | 2019.01.09 |
| 노드js 가상호스트 이용하기, node.js 가상호스트 (0) | 2018.12.20 |
| Express.js 서버로 업로드 한 Excel 파일을 JSON 형식으로 변환하기 (0) | 2018.12.20 |
| input text box 제어하기 (0) | 2018.12.20 |