gpt4 book ai didi

javascript - 使用 Javascript 堆叠元素

转载 作者:太空宇宙 更新时间:2023-11-04 13:56:31 28 4
gpt4 key购买 nike

我有以下代码用于堆叠元素以及将光标放在该元素到达顶部的元素上。这是代码.. 由于某种原因它不起作用。段落已显示,但将鼠标移到它们上面时没有任何反应。

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

关于javascript - 使用 Javascript 堆叠元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8098002/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com