[css] CSS hover 테크닉 > 팁앤테크

본문 바로가기
사이트 내 전체검색

팁앤테크

[css] CSS hover 테크닉

페이지 정보

본문

링크된 곳에 마우스를 올리면 색깔 바뀌는 CSS 의 "Hover" 기능 응용해보기



텍스트 링크된 곳에 마우스를 올리면 색깔 바뀌는 현상이 CSS 의 "Hover" 현상입니다.

"Hover" 기능을 서로 다르게 주면 심플한 메뉴가 될것입니다. "Hover" 기능은 다음과 같이 작성을 합니다.

a:hover {} 로 작성을 하는데 이 결과물은 링크가 걸린 텍스트에 절대적으로 하나만 줄 수

가 있었습니다

이제부터는 a:앞에 아무 이름이나 넘버를 삽입하여 소스를 바꾸면 원하는 만큼 자유롭게

바꿀 수가 있습니다.

예: a.이름명:hover {}

위와 같이 hover에 이름을 정해주고 <Body> 내용안의 원하는 부분에 클래스를

선언하면 됩니다.{class="이름명"}(class이름명은 hover이름명과 동일하게 정해

주어야됩니다.

다음 예제를 참고 하시기 바랍니다.

<html>
<head>
<title>내용이 다른 Hover 기능</title>

<style type="text/css">
<!--
a {font-family: 굴림; font-size:9pt; text-decoration: none}
a.no1:hover {font-size:9pt; color:#33CC00; text-decoration: none}
a.no2:hover {font-size:9pt; color:#CCCCCC; text-decoration: none}
a.no3:hover {font-size:9pt; color:#FF0000; text-decoration: none}
a.no4:hover {font-size:9pt; color:#336699; text-decoration: none}
a.no5:hover {font-size:9pt; color:#339966; text-decoration: none}
-->
</style>
</head>

<body bgcolor=#FFFFFF>
<a href="http://homejungbo.com" target="_blank" class="no1">홈정보컴</a>
<a href="http://homejungbo.com" target="_blank" class="no2">홈정보컴</a>
<a href="http://homejungbo.com" target="_blank" class="no3">홈정보컴</a>
<a href="http://homejungbo.com" target="_blank" class="no4">홈정보컴</a>
<a href="http://homejungbo.com" target="_blank" class="no5">홈정보컴</a>
</body>
</html>



자료제공 : 하이미디어디자인
추천0

댓글목록

등록된 댓글이 없습니다.

Total 825건 4 페이지
  • RSS
팁앤테크 목록
번호 제목 글쓴이 조회 추천 날짜
750 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 24509 0 02-13
749 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 24479 0 01-28
748 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 24407 0 02-19
747 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 23932 0 07-20
746 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 23814 0 12-22
745 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 23743 0 06-30
744 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 23521 0 10-24
743 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 23456 0 07-12
742 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 23423 0 07-23
741 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 23350 0 09-12
740 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 23313 0 03-14
739 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 23167 0 05-28
738 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 23127 0 12-02
737 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 23100 0 09-03
736 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 22855 0 04-09
735 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 22738 0 01-23
734 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 22610 0 03-19
733 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 22571 0 10-10
732 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 22455 0 01-03
731 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 22397 0 08-07
730 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 22383 0 08-25
729 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 22365 0 03-19
728 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 22331 0 03-20
727 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 22237 0 04-20
726 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 22216 0 08-19

검색

회원로그인

회원가입

사이트 정보

株式会社YHPLUS / 대표 : ZERO
〒140-0011 東京都品川区東大井2-5-9-203
050-5539-7787
오픈카카오톡 (YHPLUS) :
https://open.kakao.com/o/slfDj15d

접속자집계

오늘
6,425
어제
7,853
최대
8,233
전체
1,600,701
Copyright (c) 株式会社YHPLUS. All rights reserved.