如何在具有绝对位置的 div 上忽略 javascript 中的 Onmouseover
[英]How to ignore Onmouseover in javascript on div with absolute position
问题描述
我有以下代码：
<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 是半透明的。 我不能在 div2 里面有 div1。
5 个解决方案
解决方案1
2 2010-02-08 13:18:23
堆叠顺序（最大 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>
解决方案2
1 2016-10-13 17:16:02
忘记 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>
解决方案3
0 2010-02-08 13:21:06
两个建议尝试，对你的 CSS 或页面布局一无所知：
- 将 div2 的 Z-index 更改为高于 div1
- 在标签顺序中将 div2 放在首位
解决方案4
0 2010-02-08 14:03:08
通过在 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 指定元素的堆栈顺序（也可以是负数）。
- Z-index上的 W3Schools。
解决方案5
-1 2010-02-08 13:20:54
问题是您无法通过div 单击（或鼠标悬停）。 因此，当 div1 高于 div2 时，您就会遇到问题。
是否可以对 div1 和 div2 使用绝对/相对定位，并为 div2 使用比 div1 更大的 z-index？
JavaScript获取div的绝对位置
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.