[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>