0

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

4

1 回答 1

1

总答案编辑**

这里发生的是您的面罩覆盖了预期的悬停位置。一个简单的解决方法是提供ul比掩码更高的 z-index。

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

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

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

让我知道你想走哪个方向，如果这两个选项中的后者是你想要的效果，我可以帮助你。

于 2013-04-09T15:07:10.103 回答