[Web前端技术教学]盒子的隐藏和显示

16-12-17 来源：[db:作者]

收藏我要投稿

练习目的

通过制作导航条,掌握CSS技术对盒子的隐藏和显示技术.

完整代码

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>HideAndShow</title> 
</head>  
  
<body>  
    <div id="row">   
        <a href="#">grass1<span id="tip1" class="tip">grass1</span></a>   
        <a href="#">grass2 <span id="tip2" class="tip">grass2</span></a>   
        <a href="#">cloud1<span id="tip3" class="tip">cloud1</span></a>   
        <a href="#">cloud2<span id="tip4" class="tip">cloud2</span></a>   
        <a href="#">word<span id="tip5" class="tip">word</span></a>  
        <a href="#">bubble<span id="tip6" class="tip">bubble</span> </a>   
     </div>  
</body>  
</html>

CSS:

<!--  
a {  
    display: block;  
    background-color: #999999;  
    height: 30px;  
    width: 60px;  
    line-height: 30px;  
    text-decoration: none;  
    text-align: center;  
    float: left;  
    border: 1px solid #000000;  
}  
.tip{  
    display:none;  
    line-height: 200px;  
    position:relative;  
    background-image: url(image/DynMenu.jpg);  
    height: 200px;  
    width: 300px;  
    border-radius:0px 0px 5px 5px;  
    top: 4px;  
}  
a:hover{  
    background-color: #FF0000;  
    color: #FFFFFF;  
    position: relative;  
    top: 4px;  
    left: 2px;  
}  
a:hover #tip1 {   
    background-position: -48px -320px ;  
    display:block;  
  
}  
a:hover #tip2 {   
    background-position: -258px -321px ;  
    display:block;  
}  
a:hover #tip3 {   
    background-position: -7px -34px ;  
    display:block;  
}  
a:hover #tip4 {   
    background-position: -70px -103px ;  
    display:block;  
}  
a:hover #tip5 {   
    background-position: -489px -216px ;  
    display:block;  
}  
a:hover #tip6 {   
    background-position: -475px -8px ;  
    display:block;  
}  
-->

点击复制链接与好友分享!回本站首页