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

標籤：col   dex   很多   out   定位   hover   分享圖片   off   clear   

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

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

<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向下移動