表中有一個隱藏溢出的父項，它會切斷我的懸停菜單

我正在使用jQuery DataTables插件。我有一個在流體寬度div內的表格。我想要做的是讓該表能夠在頁面不再允許表格全寬時水平滾動。我嘗試使用DataTables水平滾動示例（http://datatables.net/examples/basic_init/scroll_x.html） - 但我發現它有問題，並且它不能正常工作（例如，我發現TH與TD的不匹配）。我發現很多人有同樣的問題在論壇上，並沿有人推薦添加父DIV表和使用方式的地方：表中有一個隱藏溢出的父項，它會切斷我的懸停菜單

.parent { overflow-x: auto; overflow-y: hidden; }

這個工作真的很好！我現在面臨的問題是，在我的桌子內部，我有一個小工具提示菜單，由於隱藏了溢出而被切斷。

這裏你可以看到一個演示：http://jsfiddle.net/eMvf9/

你會看到底部翻車現在就切斷。但是，如果我從.parent中刪除overflow-y: hidden，則它將獲得Y軸上的滾動條。

會有解決辦法嗎？是否必須是position fixed的.s-roll上的jQuery？

來源

2014-03-04 user1788364

您可以刪除最後一次td懸停時父母的溢出-y。

$('tr:last td:last').hover(function(){ 
    $('.parent').css('overflow-y', 'auto');  
},function(){ 
    $('.parent').css('overflow-y', 'hidden'); 
});

Demo

您也可以使用改變懸停選擇頂部最後元素菜單：

$('tr:last td:last .s-rollover').css('top', '-90px');

來源

2014-03-04 10:41:13

我想第二個答案是罰款運算。因爲第一個仍然會導致垂直滾動。 –

理想情況下，我想在那裏沒有Y軸滾動條，因爲它有一些問題。我喜歡你的想法，儘管最後的元素被放置在其他地方！有沒有辦法檢查翻車是否隱藏，如果有的話相應的位置？因爲它不僅僅是最後一個被切斷。 – user1788364

這將需要大量的計算。而且您可能還需要使用第二個apptoach將最後一行懸停在第二行。 –

最後，我不得不使用白手起家彈出框，而不是它的工作方式我想要它，因爲我無法弄清楚自己做這件事的邏輯。

這包括懸停功能，並且還會使彈出式窗框在彈出框內保持懸停狀態。

$('.s-roll').popover({ 
    html:true, 
    trigger: 'manual', 
    placement: 'left'   
}).on("mouseenter", function() { 
    var _this = this; 
    $(this).popover("show"); 
    $(".popover").on("mouseleave", function() { 
     $(_this).popover('hide'); 
    }); 
}).on("mouseleave", function() { 
    var _this = this; 
    setTimeout(function() { 
     if (!$(".popover:hover").length) { 
      $(_this).popover("hide"); 
     } 
    }, 100); 
});

對於那些有興趣：http://jsfiddle.net/eMvf9/6/

來源

2014-03-04 12:50:22 user1788364

表中有一個隱藏溢出的父項，它會切斷我的懸停菜單

回答

相關問題