예제
<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>
결과 보기