Question

当我将鼠标悬停在列表条目上时，我希望显示一个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>

问题是当我将鼠标移到项目上时，模态弹出窗口会抖动和不存在。我猜这里有类似焦点的东西：当弹出窗口变得可见时弹出窗口优先，所以当我移动鼠标时，鼠标指针不再悬停在列表元素上，并且模态弹出窗口消失了。但是鼠标指针再次在元素上方，所以它会返回等等。

让这种抖动消失的好方法是什么？

TIA。

Answer 1

总答案编辑**

这里发生的事情是你的面具覆盖了预定的悬停位置。一个简单的解决方法是为ul提供比掩码更高的z-index。

只需将此添加到您的css：http://jsfiddle.net/e8f7P/3/

ul{
    position:relative;
    z-index:1001;  
}

如果这不是您正在寻找的效果，但您仍然需要该功能，则必须制作伪悬停点。基本上你必须重新创建你的列表点，但要使它们基本上不可见（没有内容）并给它们更高的z-index。

让我知道您想去哪个方向，如果两个选项中的后一个是您想要的效果，我可以帮助您。

使模态窗口在悬停结束时消失...没有抖动

1 个答案: