懸停結束時模態窗口消失......沒有抖動

我希望有一個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。

來源

2013-04-09 Topological Sort

回覆總數編輯**

這裏發生的事情是，你的面具被覆蓋預期的懸停位置。一個簡單的解決辦法是給ul一個比你的掩碼更高的z-index。

簡單地添加到您的CSS：http://jsfiddle.net/e8f7P/3/

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

如果不是你正在尋找的效果，但你仍然想要的功能，你將不得不作出一個僞懸停點。基本上你必須重新創建你的列表點，但是使它們基本上是不可見的（沒有內容），並給它們一個更高的Z-index。

讓我知道你想去哪個方向，如果後面的兩個選項是你想要的效果，我可以幫你。

來源

2013-04-09 15:07:10 ntgCleaner

Aaah，這是一個不同的問題。對不起，我不明白你的問題。做你正在尋找的東西需要你玩z-index和空div。我會再次回答 – ntgCleaner 2013-04-09 17:20:39

上面編輯答案。 – ntgCleaner 2013-04-09 17:25:38

沒問題，只是留下評論，我會盡我所能做出迴應。另外 - 請確保清除緩存或在javascript中製作console.log（「TEST」）並檢查以確保當前代碼正在運行 – ntgCleaner 2013-04-09 18:45:24

懸停結束時模態窗口消失......沒有抖動

回答

相關問題