如何定位一個div關閉屏幕，並使其回到懸停

這裏是我使用的代碼的小提琴：FIDDLE，由於重疊誤差防止a.trigger從工作在IE，我需要定位的div從屏幕上彈出，直到a.trigger懸停。如何定位一個div關閉屏幕，並使其回到懸停

任何人都知道如何做到這一點

2012-07-12 Ashley Briscoe

是不是它已經工作？ – nnnnnn 2012-07-12 11:17:40

這個例子是工作，但網站上的一個已在彈出窗口更多的內容，它們重疊，即使有不顯示它會導致IE瀏覽器中的一個bug，防止從正常工作錨.trigger，所以我想將它們定位關閉屏幕直到他們徘徊 – 2012-07-12 11:21:56

他意味着這（http://jsfiddle.net/GQzEn/21/） – Yasser 2012-07-12 11:33:06

這裏有點在它的一個老同學的黑客。您只需通過1000像素位置上的元素屏幕外的左邊，然後把它帶回來，你做你的動畫之前：

$(document).ready(function() { 
    //If Javascript is running, change css on product-description to display:block 
    //then hide the div, ready to animate 
    $("div.pop-up").css({'display':'block','opacity':'0'}) 

    $("a.trigger").hover(
     function() { 
     $(this).prev().css("left", "0px"); 
     $(this).prev().stop().animate({ 
      opacity: 1 
     }, 500); 
     }, 
     function() { 
     // First answer had this line coming first. 
     // $(this).prev().css("left", "-1000px"); 
     $(this).prev().stop().animate({ 
      opacity: 0 
     }, 200); 
     // It should actually probably be here 
     // so the movement is still done invisibly 
     $(this).prev().css("left", "-1000px"); 
     } 
    ) 
    });

您還需要定位添加到的CSS左邊。

/* HOVER STYLES */ 
div.pop-up { 
    /*display: none;*/ 
    text-align: left; 
    position: absolute; 
    left: -1000px;  // <--- Send me left 
    margin-top: -10px; 
    width: 120px; 
    padding: 0px 13px; 
    background: #eeeeee; 
    color: #000000; 
    border: 1px solid #1a1a1a; 
    font-size: 90%; 
}

看到我在行動 - >JSFiddle

來源

2012-07-12 11:36:23

這看起來不錯，讓我試試看，生病回覆你 – 2012-07-12 11:46:19

謝謝你多數民衆贊成 – 2012-07-12 11:52:54

一切工作正常唯一的問題是什麼時候你將鼠標從外面的位置滑出屏幕最左側的彈出窗口，是否有工作要做？ – 2012-07-12 12:16:00

如何定位一個div關閉屏幕，並使其回到懸停

回答

相關問題