如何讓jQuery show（）保留在頁面

Question

我有兩個相鄰的表格，右邊的那個div在使用show（）時顯示頁面的問題。

我該如何預防？

$("tr.invoice_head td:last-child a").hover(
     function(){$(".custNotes-span",this).position({ 
      of: '.custNotes-span', 
      my: 'right top', 
      at: 'right top', 
      offset: '.custNotes-span' 
     }).css({ 
      'z-index':'100', 
      'width': '200px', 
      'position':'absolute'}).show();}, 
     function(){$(".custNotes-span").hide();} 
    ); 

更新：的jsfiddle鏈接 - http://jsfiddle.net/r60ywb0L/2/

我的道歉，這裏是的jsfiddle包括使用JS和CSS的副本。有兩個表相互浮動，我試圖在tr.invoice_head的最後一個td內懸停在錨定鏈接上時，獲取div.custNotes-span以顯示頁面的其餘部分。

Answer 1

在演奏小提琴的時候，我發現：

• CSS需要被定位之前被應用。
• 定位時（但不一定「可見」），元素需要在DOM中呈現。
• 的position()地圖的of屬性是更好地設置爲最接近的錶行
• collision:'fit'似乎工作比默認collision:'flip'更好，雖然你可能沒有注意到，除了在次小提琴的差異。
• 元素可以定位一次。每次放映都沒有必要重新定位它們。

以下解決方法利用CSS visibility來允許在避免FOUC時進行正確定位。

• 申請的.css（），包括visibility:hidden
• 「秀」 與.show()（但仍隱藏）
• 申請.POSITION（）
• 隱藏與.hide()
• 使 「看得見的」 與visibility:visible（但仍然隱藏）

然後元素可以顯示/隱藏與.show()和在懸停處理程序中使用d .hide()。

// As the positioning map and the css map get used in a loop, it's worth assigning them outside the loop. 
var maps = { 
    css: { 
     'z-index': '100', 
     'width': '200px', 
     'position': 'absolute', 
     'visibility': 'hidden' 
    }, 
    pos: { 
     'of': null, //added dynamically below 
     'my': 'right top', 
     'at': 'right top', 
     'collision': 'fit' 
    } 
}; 

//Apply CSS and pre-position the notes 
$(".custNotes-span").each(function() { 
    $(this) 
     .css(maps.css) 
     .show() 
     .position($.extend({}, maps.pos, {'of': $(this).closest("tr")})) 
     .hide() 
     .css('visibility','visible'); 
}); 

//The maps have done their work and can be deleted from the closure. 
delete maps.css; 
delete maps.pos; 

//Hover actions 
$(".custNotes a").hover(function() { 
    $(".custNotes-span", this).show(); 
}, function() { 
    $(".custNotes-span", this).hide(); 
}); 

選擇器被修改爲更友好一些。

DEMO