예제1 - JS 허버
<style>
#hz {
margin:0;
padding:0;
}
#hz li {
float:left;
list-style:none;
width:25%;
box-sizing:border-box;
}
#hz li a.on {
background:red;
color:white;
border:1px solid red;
padding:20px;
display:block;
text-align:center;
text-decoration:none;
margin:0 5px;
cursor:pointer;
}
#hz li a.off {
background:transparent;
color:black;
border:1px solid red;
padding:20px;
display:block;
text-align:center;
text-decoration:none;
margin:0 5px;
}
</style>
<script>
function on(a) {
a.setAttribute('class','on');
}
function off(a) {
a.setAttribute('class','off');
}
function url(a) {
if(a == 1) {
location.href='https://homzzang.com';
} else if (a == 2) {
location.href='https://homzzang.com/b/html';
} else if (a == 3) {
location.href='https://homzzang.com/b/css';
} else if (a == 4) {
location.href='https://homzzang.com/b/js';
}
}
</script>
<ul id='hz'>
<li><a class='off' onclick='url(1)' onmouseover='on(this)' onmouseleave='off(this)' >홈</a></li>
<li><a class='off' onclick='url(2)' onmouseover='on(this)' onmouseleave='off(this)'>HTML</a></li>
<li><a class='off' onclick='url(3)' onmouseover='on(this)' onmouseleave='off(this)'>CSS</a></li>
<li><a class='off' onclick='url(4)' onmouseover='on(this)' onmouseleave='off(this)'>JS</a></li>
</ul>
결과 보기
예제2 - CSS 허버
<style>
#hz {
margin:0;
padding:0;
}
#hz li {
float:left;
list-style:none;
width:25%;
box-sizing:border-box;
}
#hz li a {
border:1px solid red;
padding:20px;
display:block;
text-align:center;
text-decoration:none;
margin:0 5px;
}
#hz li a:hover {
background:red;
color:white;
cursor:pointer;
}
</style>
<ul id='hz'>
<li><a href='https://homzzang.com'>홈</a></li>
<li><a href='https://homzzang.com'>HTML</a></li>
<li><a href='https://homzzang.com'>CSS</a></li>
<li><a href='https://homzzang.com'>JS</a></li>
</ul>
결과 보기
