코딩동강

[JS-서기] JQ 4강 - 허버메뉴

749

예제

 

<style>

#hz ul {margin:0; padding:0}

#hz li {float:left; list-style:none; width:20%; border:1px solid red; margin-right:-1px; box-sizing:border-box;}

#hz li a.off {display:block; padding:20px; text-align:center; text-decoration:none;}

#hz li a.on {background:red; color:white;}

</style>


<script src="http://code.jquery.com/jquery-latest.js"></script>


<script>

$(document).ready(function(){

     $('.off').mouseover( function() {

         $(this).addClass('on');

     });

     $('.off').mouseleave( function() {

         $(this).removeClass('on');

     });

});

</script>


<div id='hz' class=''>

<ul id='' class=''>

<li class=''>

<a href='' target='' title='' class='off'>홈짱닷컴</a>

</li>

<li class=''>

<a href='' target='' title='' class='off'>HTML</a>

</li>

<li class=''>

<a href='' target='' title='' class='off'>CSS</a>

</li>

<li class=''>

<a href='' target='' title='' class='off'>JS</a>

</li>

<li class=''>

<a href='' target='' title='' class='off'>JQUERY</a>

</li>

</ul>

</div>

 

 

결과 보기 



분류 제목
JS-바위 JS 80~82강 - 자바스크립트 객체 클래스
JS-바위 JS 77~79강 - 자바스크립트 모듈 활용 (Javascript Module)
JS-바위 JS 73~76강 - 테이블 페이지네이션 (Table Pagination)
JS-바위 JS 72강 - AOS 라이브러리 - 슝슝 나타나는 스크롤 애니메이션
JS-바위 JS 69~71강 - 숫자 그래프 애니메이션 (Number Animation)
JS-바위 JS 68강 - animate.css 라이브러리 - 스크롤이벤트 적용
JS-바위 JS 64~67강 - tailwindcss (node js - CSS framework) - CSS 없이 스…
JS-바위 JS 61~63강 - 최신 JS 문법 (ECMA SCRIPT 6) - 변수선언 키워드 let, const, …
JS-바위 JS 60강 - 인스타그램 (instagram) API - 인스타그램 피드를 웹사이트에 출력
JS-바위 JS 56~59강 - 쿠키 (Cookie) 이용해 「오늘 하루 안보기 팝업창 띄우기」 생성
JS-바위 JS 52~55강 - 멀티플 슬라이드 (Multiple Slideshow)
JS-바위 JS 51강 - 스크롤트리거 (scrollTrigger) - 스크롤 애니메이션 구현
JS-바위 JS 46~50강 - 필터링 반응형 갤러리 (Fitered Gallery)
JS-바위 JS 45강 - 하이라이트 무빙 탭 애니메이션 (Highlight Moving Tab animation)
JS-바위 JS 42~44강 - 풀스크린 슬라이드 (FullScreen Slide) 1 - CSS로만 구현
1/47
목록
 홈  PC버전 로그인 일본어
웹디자인언어
서버관리언어
고급코딩언어
그누보드 2
제작의뢰
Q&A
커뮤니티 2
웹유틸
회원센터
홈짱 PC버전 로그인