[css] css 메뉴 이미지 롤오버 효과 > 팁앤테크

본문 바로가기

사이트 내 전체검색

뒤로가기 팁앤테크

[css] css 메뉴 이미지 롤오버 효과

본문

<style type="text/css">
#menu a img.menuon {
    display: none;
}
#menu a img.menuoff {
    display: inline;
}
#menu a:hover img.menuon {
    display: inline;
}
#menu a:hover img.menuoff {
    display: none;
}
</style>

<!-- ... 중략 ... -->

<ul id="menu">
    <li>
        <a href="menu1.html">
            <img src="menu1_off.png" class="menuoff" alt="메뉴1">
            <img src="menu1_on.png" class="menuon" alt="메뉴1">
        </a>
    </li>
    <li>
        <a href="menu2.html">
            <img src="menu2_off.png" class="menuoff" alt="메뉴2">
            <img src="menu2_on.png" class="menuon" alt="메뉴2">
        </a>
    </li>
    <li>
        <a href="menu3.html">
            <img src="menu3_off.png" class="menuoff" alt="메뉴3">
            <img src="menu3_on.png" class="menuon" alt="메뉴3">
        </a>
    </li>
</ul>
추천0

댓글목록 3

하현준우사랑님의 댓글

하현준우사랑쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 작성일

오... 소스가 간단해지고 좋네요. 유용한 정보 감사합니다.

계절을안고서님의 댓글

계절을안고서쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 작성일

소중한 팁 공유 감사드립니다.

바람나라님의 댓글

바람나라쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 작성일

좋은 소스 감사합니다

전체 825건 14 페이지
게시물 검색
Copyright (c) 株式会社YHPLUS. All rights reserved.

사이트 정보

株式会社YHPLUS / 대표 : ZERO
〒171-0014 東京都豊島区池袋2-41-5 アーバン154 8F
050-5539-7787
오픈카카오톡 (YHPLUS) :
https://open.kakao.com/o/slfDj15d

PC 버전으로 보기