I have the following code for stacking of elements and on putting the cursor over an elemnt that element es to the top. Here is the code.. It is not working for some reason. The paragraphs are displayed, but on moving the mouse over them nothing happens.
<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>
I have the following code for stacking of elements and on putting the cursor over an elemnt that element es to the top. Here is the code.. It is not working for some reason. The paragraphs are displayed, but on moving the mouse over them nothing happens.
<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>
2 Answers
Reset to default 7You cannot use z-index in JavaScript, because it's interpreted as z minus index. Use zIndex instead.
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;
}
(and also note that you cannot use top as a global variable, because it is already declared as a readonly property, window.top)
the code
top=document.getElementById(top).id;
should be
top = newTop;
and its
zIndex not z-index
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744223984a4563916.html
评论列表（0条）