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

 

 

결과 보기