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