使用 z-index 堆叠 XHTML 元素答案

【问题标题】：Stacking XHTML elements using z-index使用 z-index 堆叠 XHTML 元素
【发布时间】：2016-03-04 09:30:03
【问题描述】：

三个div 标签和p 标签，一个在另一个上面。我需要他们通过修改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>

新代码：

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

【问题讨论】：

您是否有理由不使用 CSS :hover 伪类而不是 Javascript 来执行此操作？
我将 onmouseover 事件移至 div 标签，并添加了 onmouseout 事件。该代码现在可以完美运行。非常感谢。
@DavidT 这是一个大学实验室项目。它应该以这种方式完成。 :hover 会更简单，但这是为了演示/教我们鼠标事件。
很公平，至少你现在可以正常工作了。

标签： javascript css xhtml z-index onmouseover

【解决方案1】：

z-index 仅适用于定位元素。当您的div 元素为position: absolute 时，您的p 元素（您将z-index 设置为打开）为position: static（默认值）。

如果元素的position 属性具有除static 之外的任何有效值，则元素被定位。

看来您应该将 onmouseover 事件处理程序移至 div 元素。

【讨论】：

【解决方案2】：

看起来你并没有在鼠标离开后将 z-index 降低回默认值 - 添加一个函数 onmouseout 将 z-index 重置为 0 或 1 或其他值。

【讨论】：