SSISO Community

스타일 시트 이해하기... Dhtml 이벤트 핸들러 휘슬러 홈페이지에 사용된 텍스트박스 【HTML강좌】META 태그설명 HTML TIP. CSS rollover (마우스 오버효과) HTML의 주석과 태그를 찾는 Regular expression 동적Html] expression() INPUT 태그 스타일지정 스타일시트로 모서리가 라운딩 처리된 테이블

시소당

CSS rollover (마우스 오버효과)

마우스를 올리면 그림이 바뀌는 마우스 오버효과를 스타일시트로 할수있다.^^

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<HTML> 

<HEAD>
<TITLE> CSS RollOver </TITLE>
</HEAD> 

<BODY> 

<style> 

   a.rollover img { border-width:0px; display:inline; }
   a.rollover img.over { display:none; } 

   a.rollover:hover { border:0px }
   a.rollover:hover img { display:none; }
   a.rollover:hover img.over { display:inline; } 

</style> 

<div class="rollover">
  
<a href="#test" class="rollover"><img
src="http://www.blueb.co.kr/bbs/table/JS_50/upload/s_blue.gif"><img
src="http://www.blueb.co.kr/bbs/table/JS_50/upload/s_yellow.gif"
class="over"></a>
   <a href="#test"
class="rollover"><img
src="http://www.blueb.co.kr/bbs/table/JS_50/upload/s_red.gif"><img
src="http://www.blueb.co.kr/bbs/table/JS_50/upload/s_green.gif"
class="over"></a>
</div> 

</BODY> 

</HTML>[출처] [본문스크랩] CSS rollover (마우스 오버효과)|작성자 메멘토

1928 view

4.0 stars

SSISO Community