如何在具有绝对位置的div上忽略javascript中的Onmouseover

发布于 2024-08-20 19:56:34 字数 436 浏览 6 评论 0原文

我有以下代码：

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

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

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

原文

I have the following code:

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

div1 covers div2. I need to handle onmouseover on div2. I assume that div1 handles the onmouseover event and postpone it to the body (because the body is a parent element). I cannot change div1 to a "child" of div2. Any ideas?

EDIT: The div1 is semitransparent and has to be always visible and the div2 is filled by color (not transparent). The div2 is also always visible because the div1 is semitransparent. I cannot have div1 inside div2.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一梦等七年七年为一梦 2024-08-27 19:56:34

堆叠顺序最高的元素（最大 z 索引）将收到 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>

The element that is highest in the stacking order (max z-index) will receive the onmouseover event.

To achieve the desired effect, wrap div2 in another div with the highest z-index, give div2 a lower z-index than your overlay.

As div3 has the same bounding box as div2, we attach a onmouseover event to it, and have the event handler act upon 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>

回复收藏 0 原文

醉酒的小男人 2024-08-27 19:56:34

忘记 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>

Forget about the z-index because you want div1 to be shown, not behind div2.

Try using pointer-events:none on div1 since u don't want it to affect the onmouseover event.

<body>
<div id="div1" style="position: absolute; pointer-events:none"></div>
<div id="div2"></div>
</body>

回复收藏 0 原文

中性美 2024-08-27 19:56:34

在不了解 CSS 或页面布局的情况下，可以尝试以下两个建议：

将 div2 的 Z-index 更改为
高于 div1
将 div2 放在第一位
标签顺序

回复收藏 0 原文

仙女 2024-08-27 19:56:34

通过在 div 上添加 z 索引，使 div2 的 z 索引高于 div1 的 z 索引，

例如

<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 指定元素的堆栈顺序（也可以为负数）。

z-index 上的 W3Schools。

By adding a z-index on the divs such that div2's z-index is higher than div1's z-index

e.g.

<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 specifies the stack order of an element (and it can be negative too).