如上圖所示，通道有很多個，表格只有一個。

註意：滑過通道時鼠標如果停留在上面，那麽表格才顯示，鼠標滑過表格時，表格不消失

<div id="lineContent">

　　<p class=‘channel‘></p>

　　<span class=‘channelName‘></span>

　　<p class=‘channel‘></p>

　　<span class=‘channelName‘></span>

　　<p class=‘channel‘></p>

　　<span class=‘channelName‘></span>

　　<p class=‘channel‘></p>

　　<span class=‘channelName‘></span>

　　<p class=‘channel‘></p>

　　<span class=‘channelName‘></span>

</div>

<div class=‘collections_content‘>

　　<div class="title">積壓信息 <span class="thisChannelName"></span> </div>

　　<table class="table table-hover table-striped" id="backlogGrid"></table>

</div>

//樣式我就不加了

//collections_content 根據定位

//下面是js

　　　　var detailShowLock = null;
var detailCloseLock = null;
function clearLockedTimeOut() {
if (detailShowLock) {
clearTimeout(detailShowLock);
}
if (detailCloseLock) {
clearTimeout(detailCloseLock);
}
}
$("#lineContent").on(‘mouseover‘, ‘.channel‘, function (e) {
clearLockedTimeOut();
var _self = this;
detailShowLock = setTimeout(function () {
var index = $(_self).attr(‘data-index‘);
var top = $(_self).offset().top;
$(".collections_content").show().css({‘top‘:(top - 200 / 2 - 5)});
self.getChannelGrid(index);
}, 250);
})
$("#lineContent").on(‘mouseout‘, ‘.channel‘, function (e) {
clearLockedTimeOut();
detailCloseLock = setTimeout(function () {
$(".collections_content").hide();
}, 250);
});
$(‘.collections_content‘).hover(function () {
clearLockedTimeOut();
$(this).show();
}, function () {
clearLockedTimeOut();
detailCloseLock = setTimeout(function () {
$(".collections_content").hide();
}, 250);
});

//根據需求做出來的

鼠標滑過元素，div顯示，並根據scrollTop向下移動