光标在具有更高 z-index 的重叠 div 上可见

Posted 2023-03-06

【中文标题】光标在具有更高 z-index 的重叠 div 上可见

【英文标题】：Cursor visible on overlapping div which has higher z-index

【发布时间】：2012-12-12 02:45:16

【问题描述】：

我的问题是光标出现在重叠的 div 上，该 div 具有更高的z-index。

问题是点击按钮后，出现div。现在单击之前可见的 div。即使z-index 更高，您也可以在新出现的 div 上查看光标。此问题仅在 IE 中出现，而在 FF 或 chrome 上没有。

$("#y").click(function() 
  $("#u").css("display", "block");
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="u" style="height:auto;zindex:999;display:none;border:3px solid red;width:300px;background-color:white;position:absolute;">
  awaeqweqweqwe<br>awqeqweqw<br>aweqweqweq<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br></div>
<div contenteditable="true" style="border:2px solid black;margin-top:30px;height:100px"></div>
<input type="buton" id="y" value="askjhdka">

jsFiddle - 签入 IE9。

IE 有什么解决方案吗？

【问题讨论】：

我在 js fiddle 中模拟了我的问题 - http://jsfiddle.net/YZpDk/1/。在 IE9 中运行。

这似乎是所有 IE 版本的问题；而不仅仅是 IE9。

我遇到了类似的问题，不得不用 JS 解决。当重叠元素可见时，我模糊了对输入的关注。

@ScottSimpson - 我无法以某种方式改变焦点。它是要添加的功能的一部分.. 还有其他可能的解决方案吗？

我希望这可以通过用 iFrame 包装弹出元素来解决。

【参考方案1】：

如果你从逻辑上看，如果用户不想检查覆盖，他们会点击 textarea。我认为那个时候你应该隐藏叠加层。

$('.textarea').focus(function() $("#u").css("display","none"); );