HTML鼠标悬浮显示隐藏 JS方法

CSS样式表：

 

@charset "utf-8";
/* CSS Document */
.a
{
    width:80px;
    height:40px;
    top:200px;
    left:200px;
    background-color:#F00;
    position:absolute;
    overflow:hidden;
}
.b
{
    width:80px;
    height:120px;
    top:40px;
    left:0px;
    position:absolute;
}

.x
{
    width:80px;
    height:40px;
    top:0px;
    left:0px;
    background-color:#0F0;
    overflow:hidden;
    position:absolute;
}
.x1
{
    width:100px;
    height:160px;
    top:0px;
    left:80px;
    background-color:#0F0;
    position:absolute;
}
.y
{
    width:80px;
    height:40px;
    top:40px;
    left:0px;
    background-color:#00F;
    overflow:hidden;
    position:absolute;
}
.y1
{
    width:100px;
    height:160px;
    top:0px;
    left:80px;
    background-color:#00F;
    position:absolute;
}
.z
{
    width:80px;
    height:40px;
    top:80px;
    left:0px;
    background-color:#F0F;
    overflow:hidden;
    position:absolute;
}
.z1
{
    width:100px;
    height:160px;
    top:0px;
    left:80px;
    background-color:#F0F;
    position:absolute;
}

 

源代码：

 

<!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>
<link href="Untitled-3的样式表.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="a" id="f1" onmouseover="h1()" onmouseout="h2()">
  <div class="b">
    <div class="x" id="f2" onmouseover="h3()" onmouseout="h4()">
       <div class="x1"></div>
    </div>
    <div class="y" id="f3" onmouseover="h5()" onmouseout="h6()">
       <div class="y1"></div> 
    </div>
    <div class="z" id="f4" onmouseover="h7()" onmouseout="h8()">
       <div class="z1"></div>
    </div>
  </div>
</div>
</body>
</html>
<script>
function h1()
{
    document.getElementById("f1").style.overflow="visible";
    
}
function h2()
{
    document.getElementById("f1").style.overflow="hidden";
}
function h3()
{
    document.getElementById("f2").style.overflow="visible";
}
function h4()
{
    document.getElementById("f2").style.overflow="hidden";
}
function h5()
{
    document.getElementById("f3").style.overflow="visible";
}
function h6()
{
    document.getElementById("f3").style.overflow="hidden";
}
function h7()
{
    document.getElementById("f4").style.overflow="visible";
}
function h8()
{
    document.getElementById("f4").style.overflow="hidden";
}
</script>

 

效果图：

 

posted @ 2016-05-26 22:01  小飛  阅读(2223)  评论(0)  编辑  收藏  举报