Jquery 使模式窗口在悬停结束时消失…无抖动_Jquery_Hover_Modal Dialog

Jquery 使模式窗口在悬停结束时消失…无抖动

jquery

Jquery 使模式窗口在悬停结束时消失…无抖动,jquery,hover,modal-dialog,Jquery,Hover,Modal Dialog,我想让Javascript模式弹出窗口在我将鼠标移到列表条目上时出现，在鼠标离开链接（或模式弹出窗口）时消失，这样用户就不必单击X键使窗口消失。该窗口的目的是提供有关链接的更多信息，而无需用户单击或转到新页面我正在使用jQuery的悬停： // Function called to open the window: function openModalPopupWindow() { document.getElementById('modalMask').style.display =

我想让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 ();
  }
);

//调用函数打开窗口：
函数openModalPopupWindow（）
{
document.getElementById（'modalMask'）.style.display='inline block'；//使模式弹出内容可见
} 
//调用函数以关闭窗口：
函数closeModalPopupWindow（）
{
document.getElementById（'modalMask'）。style.display='none'；//使模式弹出内容不可见：
} 
$（“li”）。悬停(
职能（e）{
$（此）。追加（$（“***”）；
openModalPopupWindow（）；
}, 
职能（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.

总答案编辑**

这里发生的情况是，你的面罩覆盖了预期的悬停位置。一个简单的解决方法是给

ul

一个比你的面具更高的z指数

只需将其添加到css中：

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

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

aah，这是另一个问题。对不起，我不明白你的问题。做你想做的事情需要你使用z-index和空div。我会再回答一个问题，只需留下评论，我会在可能的时候做出回应。另外-确保清除缓存或在javascript中创建一个console.log（“TEST”）并检查日志以确保当前代码正在运行是的，您可以移动它以使模式掩码不覆盖链接，或者您可以为ul和li创建一个容器div并创建一个没有内容的重复列表，该重复列表将覆盖旧列表，也将位于模式掩码的顶部。太棒了！我很高兴你为你的需求找到了一个很好的解决方案！恭喜！

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