3

我有以下代码：

<body>
  <div id="div1" style="position: absolute;"></div>
  <div id="div2" onmouseover="not handling"></div>
</body>

div1 覆盖 div2。我需要处理onmouseoverdiv2。我假设 div1 处理onmouseover事件并将其推迟到正文（因为正文是父元素）。我无法将 div1 更改为 div2 的“孩子”。有任何想法吗？

编辑： div1 是半透明的，必须始终可见，并且 div2 由颜色填充（不透明）。div2 也始终可见，因为 div1 是半透明的。我不能在 div2 中有 div1。

4

5 回答 5

2

堆叠顺序最高的元素（最大 z-index）将接收 onmouseover 事件。

为了达到预期的效果，将 div2 包裹在另一个具有最高 z-index 的 div 中，给 div2 一个比您的叠加层更低的 z-index。

由于 div3 与 div2 具有相同的边界框，我们将 onmouseover 事件附加到它，并让事件处理程序对 div2 进行操作。

<body>
    <div id="div1" style="position: absolute; z-index: 10; left:0; top; 0; width: 100%; height: 100%; opacity: 0.25; background-color: black;"></div>
    <div id="div3" style="z-index: 20; position: relative;">
    <div id="div2" style="z-index: 0; position: relative;">
        </div>
    </div>
</body>
于 2010-02-08T13:18:23.887 回答
1

忘记 z-index，因为您希望显示 div1，而不是 div2。

尝试在 div1 上使用 pointer-events:none ，因为您不希望它影响 onmouseover 事件。

<body>
<div id="div1" style="position: absolute; pointer-events:none"></div>
<div id="div2"></div>
</body>
于 2016-10-13T17:16:02.000 回答
0

尝试两个建议，但对您的 CSS 或页面布局一无所知：

  • 将 div2 的 Z-index 更改为高于 div1
  • 在标签顺序中将 div2 放在首位
于 2010-02-08T13:21:06.450 回答
0

通过在 div 上添加 z-index 使得 div2 的 z-index 高于 div1 的 z-index

例如

<body>
  <div id="div1" style="position: absolute; z-index: -1"></div>
  <div id="div2" style="position: relative; z-index: 1000" onmouseover="alert('mousemove')"></div>
</body>

z-index 指定元素的堆栈顺序（也可以是负数）。

于 2010-02-08T14:03:08.527 回答
-1

问题是您不能通过 div 单击（或鼠标悬停）。因此，当 div1 高于 div2 时，您就会遇到问题。

是否可以对 div1 和 div2 使用绝对/相对定位，并为 div2 使用比 div1 更大的 z-index？

于 2010-02-08T13:20:54.790 回答