网页设计里关于滑动门特效问题
请问我想要做滑动门效果，但是鼠标滑过“middle”时，“diyi“不隐藏，这要怎么改才能是对的，还是要加什么东西，谢谢大神们！！！下面是代码<!DOCTYPEhtmlP...
请问我想要做滑动门效果，但是鼠标滑过“middle”时，“diyi“不隐藏，这要怎么改才能是对的，还是要加什么东西，谢谢大神们！！！下面是代码
<!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="mmm.css" type="text/css" rel="stylesheet" />
<script>
function yb()
{
var x1=document.getElementById("diyi");
var x2=document.getElementById("dier");
var x2=document.getElementById("disan");
x1.className="diyi";
x2.className="yincang"
}
function eb()
{
var x1=document.getElementById("dier");
var x2=document.getElementById("diyi");
var x2=document.getElementById("disan");
x1.className="dier";
x2.className="yincang"
}
function sb()
{
var x1=document.getElementById("disan");
var x2=document.getElementById("diyi");
var x2=document.getElementById("dier");
x1.className="disan";
x2.className="yincang"
}
</script>
</head>
<body>
<div id="all">
<div id="left" onmouseover="yb()"></div>
<div id="middle" onmouseover="eb()"></div>
<div id="right" onmouseover="sb()"></div>
<div id="diyi" class="diyi"></div>
<div id="dier" class="dier yincang"></div>
<div id="disan" class="disan yincang"></div>
</div>
</body>
</html>
这是页面代码，
#all{ width:330px; height:300px;}
#left{ width:100px; height:100px; background-color:#9F3; float:left; margin-right:10px;}
#middle{ width:100px; height:100px; background-color:#0F0; float:left; margin-right:10px}
#right{ width:100px; height:100px; background-color:#CF3; float:left;}
.diyi{ width:330px; height:200px; background-color:#0FF; margin-bottom:0px; float:left;}
.dier{ width:330px; height:200px; background-color:#CCC; float:left;}
.disan{ width:330px; height:200px; background-color:#FF6; float:left;}
.yincang{ display:none;}
这是CSS代码 展开
<!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="mmm.css" type="text/css" rel="stylesheet" />
<script>
function yb()
{
var x1=document.getElementById("diyi");
var x2=document.getElementById("dier");
var x2=document.getElementById("disan");
x1.className="diyi";
x2.className="yincang"
}
function eb()
{
var x1=document.getElementById("dier");
var x2=document.getElementById("diyi");
var x2=document.getElementById("disan");
x1.className="dier";
x2.className="yincang"
}
function sb()
{
var x1=document.getElementById("disan");
var x2=document.getElementById("diyi");
var x2=document.getElementById("dier");
x1.className="disan";
x2.className="yincang"
}
</script>
</head>
<body>
<div id="all">
<div id="left" onmouseover="yb()"></div>
<div id="middle" onmouseover="eb()"></div>
<div id="right" onmouseover="sb()"></div>
<div id="diyi" class="diyi"></div>
<div id="dier" class="dier yincang"></div>
<div id="disan" class="disan yincang"></div>
</div>
</body>
</html>
这是页面代码，
#all{ width:330px; height:300px;}
#left{ width:100px; height:100px; background-color:#9F3; float:left; margin-right:10px;}
#middle{ width:100px; height:100px; background-color:#0F0; float:left; margin-right:10px}
#right{ width:100px; height:100px; background-color:#CF3; float:left;}
.diyi{ width:330px; height:200px; background-color:#0FF; margin-bottom:0px; float:left;}
.dier{ width:330px; height:200px; background-color:#CCC; float:left;}
.disan{ width:330px; height:200px; background-color:#FF6; float:left;}
.yincang{ display:none;}
这是CSS代码 展开
- 你的回答被采纳后将获得：
- 系统奖励15（财富值+成长值）+难题奖励30（财富值+成长值）
1个回答
展开全部
<!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="mmm.css" type="text/css" rel="stylesheet" />
<script>
function yb()
{
var x1=document.getElementById("diyi");
var x2=document.getElementById("dier");
var x3=document.getElementById("disan");
x1.className="diyi";
x2.className="yincang"
x3.className="yincang"
}
function eb()
{
var x1=document.getElementById("dier");
var x2=document.getElementById("diyi");
var x3=document.getElementById("disan");
x1.className="dier";
x2.className="yincang"
x3.className="yincang"
}
function sb()
{
var x1=document.getElementById("disan");
var x2=document.getElementById("diyi");
var x3=document.getElementById("dier");
x1.className="disan";
x2.className="yincang"
x3.className="yincang"
}
</script>
</head>
<body>
<div id="all">
<div id="left" onmouseover="yb()"></div>
<div id="middle" onmouseover="eb()"></div>
<div id="right" onmouseover="sb()"></div>
<div id="diyi" class="diyi"></div>
<div id="dier" class="dier yincang"></div>
<div id="disan" class="disan yincang"></div>
</div>
</body>
</html>
这是页面代码，
<style>
#all{ width:330px; height:300px;}
#left{ width:100px; height:100px; background-color:#9F3; float:left; margin-right:10px;}
#middle{ width:100px; height:100px; background-color:#0F0; float:left; margin-right:10px}
#right{ width:100px; height:100px; background-color:#CF3; float:left;}
.diyi{ width:330px; height:200px; background-color:#0FF; margin-bottom:0px; float:left;}
.dier{ width:330px; height:200px; background-color:#CCC; float:left;}
.disan{ width:330px; height:200px; background-color:#FF6; float:left;}
.yincang{ display:none;}
</style>
这是CSS代码
你直接使用X2这个的时候有没有想过
var x2=document.getElementById("diyi");
var x2=document.getElementById("dier");
后面document.getElementById("dier")重新赋值给了X2？简单点就是后面的起作用，前面的被覆盖
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="mmm.css" type="text/css" rel="stylesheet" />
<script>
function yb()
{
var x1=document.getElementById("diyi");
var x2=document.getElementById("dier");
var x3=document.getElementById("disan");
x1.className="diyi";
x2.className="yincang"
x3.className="yincang"
}
function eb()
{
var x1=document.getElementById("dier");
var x2=document.getElementById("diyi");
var x3=document.getElementById("disan");
x1.className="dier";
x2.className="yincang"
x3.className="yincang"
}
function sb()
{
var x1=document.getElementById("disan");
var x2=document.getElementById("diyi");
var x3=document.getElementById("dier");
x1.className="disan";
x2.className="yincang"
x3.className="yincang"
}
</script>
</head>
<body>
<div id="all">
<div id="left" onmouseover="yb()"></div>
<div id="middle" onmouseover="eb()"></div>
<div id="right" onmouseover="sb()"></div>
<div id="diyi" class="diyi"></div>
<div id="dier" class="dier yincang"></div>
<div id="disan" class="disan yincang"></div>
</div>
</body>
</html>
这是页面代码，
<style>
#all{ width:330px; height:300px;}
#left{ width:100px; height:100px; background-color:#9F3; float:left; margin-right:10px;}
#middle{ width:100px; height:100px; background-color:#0F0; float:left; margin-right:10px}
#right{ width:100px; height:100px; background-color:#CF3; float:left;}
.diyi{ width:330px; height:200px; background-color:#0FF; margin-bottom:0px; float:left;}
.dier{ width:330px; height:200px; background-color:#CCC; float:left;}
.disan{ width:330px; height:200px; background-color:#FF6; float:left;}
.yincang{ display:none;}
</style>
这是CSS代码
你直接使用X2这个的时候有没有想过
var x2=document.getElementById("diyi");
var x2=document.getElementById("dier");
后面document.getElementById("dier")重新赋值给了X2？简单点就是后面的起作用，前面的被覆盖
追问
不会的，不过我已经解决了，谢谢你
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
