使用Javascript堆叠元素_Javascript_Html_Css

使用Javascript堆叠元素

javascript html css

使用Javascript堆叠元素,javascript,html,css,Javascript,Html,Css,我有下面的代码来堆叠元素，当把光标放在一个元素上时，该元素会出现在顶部。这是密码。。由于某种原因，它不起作用。将显示段落，但在其上移动鼠标时，不会发生任何事情 <html> <head> <title>Stacking</title> </script> <style type="text/css"> .layer1Style { position: absolute; top:50pt; left:50pt; backg

我有下面的代码来堆叠元素，当把光标放在一个元素上时，该元素会出现在顶部。这是密码。。由于某种原因，它不起作用。将显示段落，但在其上移动鼠标时，不会发生任何事情

<html>
<head>
<title>Stacking</title>
</script>
<style type="text/css">
.layer1Style
{
position: absolute;
top:50pt;
left:50pt;
background-color:red;
z-index:0;
}
.layer2Style
{
position: absolute;
top:75pt;
left:75pt;
background-color:green;
z-index:0;
}
.layer3Style
{
position: absolute;
top:100pt;
left:100pt;
background-color:blue;
z-index:10;
}
</style>

<script type="text/javascript">
var top="layer3";

function mover(newTop)
{
var oldTopStyle=document.getElementById(top).style;
var newTopStyle=document.getElementById(newTop).style;
oldTopStyle.z-index="0";
newTopStyle.z-index="10";
top=document.getElementById(top).id;
}
</script>
</head>

<body>
<div class="layer1Style" id="layer1" onmouseover="mover('layer1')">
<p>This is my first paragraph</p>
</div>
<div class="layer2Style" id="layer2" onmouseover="mover('layer2')">
<p>This is my second paragraph</p>
</div>
<div class="layer3Style" id="layer3" onmouseover="mover('layer3')">
<p>This is my third paragraph</p>
</div>
</body>
</html>


堆叠
.第1层风格
{
位置：绝对位置；
顶部：50磅；
左：50分；
背景色：红色；
z指数：0；
}
.第二层风格
{
位置：绝对位置；
顶部：75磅；
左：75分；
背景颜色：绿色；
z指数：0；
}
.第三层风格
{
位置：绝对位置；
顶部：100磅；
左：100分；
背景颜色：蓝色；
z指数：10；
}
var top=“layer3”；
功能移动器（newTop）
{
var oldTopStyle=document.getElementById（顶部）.style；
var newTopStyle=document.getElementById（newTop.style）；
oldTopStyle.z-index=“0”；
newTopStyle.z-index=“10”；
top=document.getElementById（top.id）；
}
这是我的第一段
这是我的第二段
这是我的第三段

不能在JavaScript中使用

z-index

，因为它被解释为

z减去index

。改用

zIndex

function mover(newTop)
{
    var oldTopStyle = document.getElementById(top).style;
    var newTopStyle = document.getElementById(newTop).style;
    oldTopStyle.zIndex = "0";  // "zIndex", not "z-index"
    newTopStyle.zIndex = "10"; // "zIndex", not "z-index"
    top = document.getElementById(top).id;
}

（还请注意，不能将

top

用作全局变量，因为它已声明为只读属性。）

代码

top=document.getElementById(top).id;

应该是

top  = newTop;

及其

zIndex not z-index