overflow onclick ondblclick 练习
<!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>无标题文档</title>
<style>
*{ margin:0px; padding:0px;}
.cboxx{ width:100%; height:45px; border:#CCC 1px solid; background-color:#CCC;}
.c222{ height:45px; width:200px; border:1px solid #000; position:absolute; left:150px; top:-1px; overflow:hidden;}
.c222:hover{ overflow:visible; cursor:pointer; color:#F90;}
.c333{ height:200px; width:630px; border:1px solid #000; position:relative; top:1px; left:-8px;}
.c444{ height:160px; width:200px; border:1px solid #000; position:relative; float:left; margin-left:6px;}
.c555{ height:30px; width:200px; border:1px solid #000; position:relative; float:left; margin-left:6px; top:5px; line-height:30px; text-align:center;}
.c555:hover{ color:#F00;}
.c666{ height:30px; width:100px; position:relative; border:1px solid #000; left:1000px; top:8px; line-height:40px;}
.c666:hover{ color:#F90; cursor:pointer;}
.c777{ height:480px; width:565px; position:relative; border:1px solid #000; left:630px; top:-198px;display:none;}
.c7771{ height:480px; width:565px; position:relative; border:1px solid #000; left:630px; top:-198px;display:none;}
.c7772{ height:480px; width:565px; position:relative; border:1px solid #000; left:630px; top:-198px;display:none;}
.c888{ height:350px; width:550px; position:absolute; border:1px solid #000; margin-left:6px; top:8px;}
.c999{ height:100px; width:550px; position:absolute; border:1px solid #0FF; left:6px; top:365px;}
.c8881{ height:350px; width:550px; position:absolute; border:1px solid #000; margin-left:6px; top:8px; }
.c9991{ height:100px; width:550px; position:absolute; border:1px solid #0FF; left:6px; top:365px;}
.c8882{ height:350px; width:550px; position:absolute; border:1px solid #000; margin-left:6px; top:8px; }
.c9992{ height:100px; width:550px; position:absolute; border:1px solid #0FF; left:6px; top:365px;}
</style>
</head>
<body>
<div class="cboxx">
<div class="c222"><img src="未标题-1.jpg" />
<div class="c333">
<div class="c444"><img src="830c41e550af4e48c45cc3a0.jpg" /></div>
<div class="c444"><img src="217881748872.jpg" /></div>
<div class="c444"><img src="c0731171813603.jpg" /></div>
<div class="c555" onclick="ccccc1()" ondblclick="ccccc2()">角色扮演
<div class="c777" id="c000">
<div class="c888"><img src="0Z2123041-0.jpg" /></div>
<div class="c999"><p align="left"> 北宋年间，天下太下。而武林中太白、少林等九大门派并立，更相约于太白峰顶论剑。同一时间，沈浪后人，优雅而神秘的公子羽，和与其有着千丝万缕关系之“黑手”，却正在酝酿着一场足以颠覆江湖的滔天巨浪。</p>
</div>
</div>
<div class="c7771" id="c001">
<div class="c888"><img src="mj0115cj02s.jpg" /></div>
<div class="c999"><p align="left"> 《QQ飞车》是由腾讯的琳琅天上游戏工作室开发，腾讯游戏发行的一款网络游戏，最高同时在线已超过300万。游戏结合休闲和竞技玩法，戏，采用了物理引擎PhysX来保证车辆运行时的真实感。</p></div>
</div>
<div class="c7772" id="c002">
<div class="c888"><img src="u=1805971805,524519640&fm=11&gp=0.jpg" /></div>
<div class="c999"><p align="left"> 王者荣耀新手入门玩法介绍，王者荣耀是全球首款5V5英雄公平对战手游，腾讯最新MOBA手游大作，5V5王者峡谷、5V5深渊大乱斗、以及3V3、1V1等多样模式一键体验，热血竞技尽享快感。</p></div>
</div>
</div>
<div class="c555" id="c001" onclick="ccccc3()" ondblclick="ccccc4()">极限竞速</div>
<div class="c555" id="c002" onclick="ccccc5()" ondblclick="ccccc6()">全新手游</div>
</div>
</div>
<div class="c666">返回官网首页</div>
</div>
</body>
</html>
<script>
var a=document.getElementById("c000")
var b=document.getElementById("c001")
var c=document.getElementById("c002")
function ccccc1()
{
a.style.display="block"
b.style.display="none"
c.style.display="none"
}
function ccccc2()
{
a.style.display="none"
b.style.display="none"
c.style.display="none"
}
function ccccc3()
{
b.style.display="block"
a.style.display="none"
c.style.display="none"
}
function ccccc4()
{
a.style.display="none"
b.style.display="none"
c.style.display="none"
}
function ccccc5()
{
c.style.display="block"
b.style.display="none"
a.style.display="none"
}
function ccccc6()
{
a.style.display="none"
b.style.display="none"
c.style.display="none"
}
</script>
