使模式窗口在hover...without抖动结束时消失
使模式窗口在hover...without抖动结束时消失
提问于 2013-04-09 23:01:55
我想让Javascript模式弹出窗口在我将鼠标放在列表条目上时出现，并在鼠标离开链接(或模式弹出窗口)时消失--这样用户就不必单击X来使窗口消失。该窗口的目的是提供有关链接的更多信息，而无需用户单击或转到新页面。
我使用的是jQuery的悬停：
// Function called to open the window:
function openModalPopupWindow()
{
document.getElementById('modalMask').style.display = 'inline-block'; // Make the modal popup stuff visible
}
// Function called to close the window:
function closeModalPopupWindow()
{
document.getElementById('modalMask').style.display = 'none'; // Make the modal popup stuff invisible:
}
$("li").hover(
function (e) {
$(this).append($("<span> ***</span>"));
openModalPopupWindow ();
},
function (e) {
$(this).find("span:last").remove();
closeModalPopupWindow ();
}
);在此HTML文件中：
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>
<link rel="stylesheet" href="modal.css" id="css">
</head>
<body>
<ul>
<li>Coke</li>
<li>Pepsi</li>
<li>R. C.</li>
</ul>
<div id="modalMask">
<div id="modalContent">
<p>This is a "modal" popup window.</p>
</div>
</div>
<script src="modal.js"></script>
</body>
</html>问题是，当我将鼠标移到项目上时，模式弹出窗口时而抖动，时而消失。我猜这里有类似焦点的东西:弹出窗口在可见时优先，所以当我移动鼠标时，鼠标指针不再悬停在列表元素上，模式弹出窗口也消失了。然后鼠标指针再次移到元素上，因此它又回来了，依此类推。
什么是消除这种抖动的好方法？
蒂娅。
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-04-09 23:07:10
编辑总答案**
这里发生的情况是，您的面罩覆盖了预期的悬停位置。一个简单的解决方法是给ul一个比你的掩码更高的z索引。
只需将此代码添加到css：http://jsfiddle.net/e8f7P/3/
ul{
position:relative;
z-index:1001;
}如果这不是你想要的效果，但你仍然想要它的功能，你将不得不做一个假的悬停位置。基本上，您必须重新创建列表中的点，但使它们基本不可见(无内容)，并为它们提供更高的z索引。
让我知道你想往哪个方向走，如果两个选项中的后一个是你想要的效果，我可以帮你。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15905482
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号