Saturday, February 17, 2007
HTML-CSS] 마우스 가져갔을 때에만, 밑줄(언더라인) 표시; Mouse Hover Underline
평소에는 링크 텍스트에 밑줄을 넣지 않다가, 마우스가 그 위를 지나갈 때(호버)에만 밑줄(언더라인)을 넣는 방법입니다. 링크에 항상 밑줄이 있는 것이 기본값이지만, 그러면 가독성이 떨어지기에, 마우스가 지날 때에만 밑줄을 넣는 방법이 많이 사용됩니다.
또한, 마우스를 가져가면, 링크 텍스트를 빨간색으로 변경시켜 알아보기 쉽게 하는 법도 있습니다.
a:link 는 보통 때의 링크 텍스트의 스타일이고
a:visited 는 이미 방문한 적이 있는 링크의 스타일이고
a:hover 는 마우스가 링크 위를 스쳐 지날 때의 색깔이고
a:active 는 좀 모호한데, 링크를 완전히 클릭하지 않고, 마우스로 선택만 해 둔 상태의 스타일입니다.
파일명: example.html
참고: ▶▶ HTML-CSS] A태그의, 링크 밑줄(언더라인) 없애기, 제거; Links without Underline
또한, 마우스를 가져가면, 링크 텍스트를 빨간색으로 변경시켜 알아보기 쉽게 하는 법도 있습니다.
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="https://www.google.co.kr/">Google 검색</a>
<br />
<!--
a.no-uline 클래스를 이용하여,
마우스 가져갔을 때에만 밑줄 표시하기 + 링크 텍스트를 빨갛게 표시
-->
<a href="https://www.google.co.kr/" class="no-uline">Google 검색</a>
</body>
</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="https://www.google.co.kr/">Google 검색</a>
<br />
<!--
a.no-uline 클래스를 이용하여,
마우스 가져갔을 때에만 밑줄 표시하기 + 링크 텍스트를 빨갛게 표시
-->
<a href="https://www.google.co.kr/" class="no-uline">Google 검색</a>
</body>
</html>
참고: ▶▶ HTML-CSS] A태그의, 링크 밑줄(언더라인) 없애기, 제거; Links without Underline
tag: html
HTML | CSS | 자바스크립트 JavaScript
<< Home