Javascript 使用z索引堆叠XHTML元素_Javascript_Css_Xhtml_Z Index_Onmouseover

Javascript 使用z索引堆叠XHTML元素

javascript css

Javascript 使用z索引堆叠XHTML元素,javascript,css,xhtml,z-index,onmouseover,Javascript,Css,Xhtml,Z Index,Onmouseover,三个div标签，内有p标签，一个叠在另一个上。我需要他们在mouseover上修改z-index属性。你能告诉我为什么这不起作用吗 <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http:

三个

div

标签，内有

标签，一个叠在另一个上。我需要他们在mouseover上修改

z-index

属性。你能告诉我为什么这不起作用吗

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- Lab Program 8A // Element stacking -->

<head>
    <title>Lab 8A : Changing element stacking on mouseover</title>

    <script type="text/javascript">
        function MoveUp(here)
        {
            here.style.zIndex= 5;
        }
    </script>

    <style type="text/css">
        div {position:absolute}
        p {font-size:100px; margin:0px; border:solid}
    </style>
</head>

<body>
    <div>
        <p style="background-color:green" onmouseover="this.style.zIndex=5">IWT Lab 1</p>
    </div>
    <div>
        <p style="background-color:yellow; margin-left:50px" onmouseover="MoveUp(this)">IWT Lab 2</p>
    </div>
    <div>
        <p  style="background-color:pink;  margin-left:100px" onmouseover="MoveUp(this)">IWT Lab 3</p>
    </div>
</body>
</html>


实验8A：更改鼠标上方的元素堆叠
函数向上移动（此处）
{
这里，style.zIndex=5；
}
div{位置：绝对}
p{字体大小：100px；边距：0px；边框：实心}
IWT实验室1
IWT实验室2
IWT实验室3

新代码：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- Lab Program 8A // Element stacking -->
<head>
<title>Lab 8A : Changing element stacking on mouseover</title>
<script type="text/javascript">
function MoveUp(here)
{
here.style.zIndex= 1 ;
}
function MoveDown(here)
{
here.style.zIndex = 0 ;
}
</script>
<style type="text/css">
div {position:absolute}
p {position:absolute; font-size:100px; margin:0px; border:solid; height:150px; width:500px}
</style>
</head>
<body>
<div onmouseover="MoveUp(this)" onmouseout="MoveDown(this)">
<p style="background-color:green">IWT Lab 1</p>
</div>
<div onmouseover="MoveUp(this)" onmouseout="MoveDown(this)">
<p style="background-color:yellow; margin-left:50px" onmouseover="MoveUp(this)">IWT Lab 2</p>
</div>
<div onmouseover="MoveUp(this)" onmouseout="MoveDown(this)">
<p  style="background-color:pink;  margin-left:100px">IWT Lab 3</p>
</div>
</body>
</html>


实验8A：更改鼠标上方的元素堆叠
函数向上移动（此处）
{
here.style.zIndex=1；
}
函数向下移动（此处）
{
here.style.zIndex=0；
}
div{位置：绝对}
p{位置：绝对；字体大小：100px；边距：0px；边框：实心；高度：150px；宽度：500px}
IWT实验室1
IWT实验室2
IWT实验室3

z-index

仅适用于定位元素。当您的

div

元素被设置为

位置：绝对时，您的p
元素（您将z-index
设置为打开）是位置：静态（默认）
如果元素的位置
属性具有除静态
以外的任何有效值，则会定位元素
看起来您应该将onmouseover
事件处理程序移动到div元素。
看起来您没有在鼠标离开后将z索引还原为默认值-添加一个函数onmouseout
，该函数将z索引重置为0或1或其他值。
您不使用CSS执行此操作有什么原因吗：hover
伪类而不是Javascript？我将onmouseover事件移动到div标记，并添加了onmouseout事件。代码现在工作得完美无缺。非常感谢。@DavidT这是一个大学实验室项目。应该这样做悬停会简单得多，但这是为了演示/教我们鼠标事件。这很公平，至少你现在可以使用它了。