使用Javascript堆叠元素

问题描述：

我有以下代码用于堆叠元素，并将光标放在elemnt元素顶部。这是代码..它由于某种原因不工作。段落显示，但将鼠标移到它们上面时，没有任何反应。使用Javascript堆叠元素

<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>

答

不能在JavaScript中使用z-index，因为它解释为z minus 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作为一个全局变量，因为它已经被声明为只读属性，window.top）

'oldTopStyle [“z-index”] =“0”;'也可以。 – Miscreant

答

代码

top=document.getElementById(top).id;

应该

top = newTop;

及其

zIndex not z-index

使用Javascript堆叠元素

相关推荐