2016-10-24 17 views
-1

我在jScrollPane(http://jscrollpane.kelvinluck.com)中有一個表。在桌子上我有一個圖像,所以當用戶懸停在它上面顯示一個文字泡泡。在jScrollPane中懸停DIV前進

這工作得很好,但問題是當我將鼠標懸停在圖像上時,氣泡被切斷。我需要做的是,當它盤旋完全把泡前進而不會隱藏或切斷jspContainer

裏面雖然我試圖以設置.bubble較高z-index價值似乎並不奏效。

但是,當我增加的jspContainer泡沫是完全可見的容器高度,但我需要把它直接使用,無需增加高度

我已經在這裏http://jsfiddle.net/livewirerules/x9dcgthp/3/

樣本小提琴任何幫助將不勝感激

+1

那個圖像在哪裏? –

+0

你的js小提琴似乎不符合你所說的話。請分享您場景描繪的確切代碼,以便我們提供幫助。 –

+0

@NasirT對不起,我沒有更新小提琴中的草案..這裏是鏈接http://jsfiddle.net/livewirerules/x9dcgthp/3/ – LiveEn

回答

0

我建議你丟失jScrollPane並改爲處理默認滾動條。 jScrollPane可以刪除滾動條並替換它的唯一方法是將容器設置爲overflow: hidden;並手動處理滾動事件,這意味着超出該容器的任何內容都將被剪掉。如果強制容器發生可見溢出,jScrollPane將停止工作。

但是,您有幾種解決方法,但我不建議全部使用這些解決方法。

  • 你可以把工具提示JScrollPane的容器外,但你必須手動將它滾動和位置會相應引起更多的開銷和頁面反應遲鈍。
  • 您可以在jscrollpane外有一個單擊tooptip對象,您可以通過單擊/懸停圖標來激活/停用該對象。這將再次導致更多的開銷和不可維護的代碼。
  • 您可以增加jScrollPane的高度,然後向其添加填充並將工具提示移動到中心,而不是在圖標下方。不過,這可能會導致內容溢出。
  • 您可以在懸停/點擊時覆蓋數據行,而不是在圖標下方顯示工具提示。這種方式完全可見,雖然它違背了適當的UI/UX原則。
  • 您可以創建自己的自定義jScrollPane實現,該實現允許流血的內容。這會使你的工作量增加一倍,但仍然會導致性能下降。

最終,丟失jScrollPane仍然是最好的選擇,因爲內置滾動條沒有定義您要進行的整體設計方向。此外,一些現代瀏覽器已經隱藏了滾動條,並在可滾動容器上顯示更好的元素。

0

您所擁有的jspcontainer高度的第一個問題不是因爲z-index,而是因爲您在調用$('.scroll-pane').jScrollPane();而正在呈現數據表,這會導致javascript爲jScrollPane設置1的高度,或者2行,其中只在那段時間內渲染。

您需要將函數添加到$(document).ready()函數中,以便窗格在與頁面相關的所有元素都被渲染後進行初始化。或者在頁面末尾添加此調用。

$(document).ready(function() 
{ 
    $('.scroll-pane').jScrollPane(); 
}); 

現在我認爲你可以解決css問題來獲取氣泡對齊設置。 :)

此外,這裏有一點你修改過的代碼,我已經工作了一些調整。 http://codepen.io/Nasir_T/pen/RGdrbB

希望這會有所幫助。