• 회원가입
  • 로그인

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



예제

 

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

 

 

결과 보기 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012