鼠标滑过元素，div显示，并根据scrollTop向下移动

Posted 2020-10-20 米雪也是雪❤

如上图所示，通道有很多个，表格只有一个。

注意：滑过通道时鼠标如果停留在上面，那么表格才显示，鼠标滑过表格时，表格不消失

<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);
            });

//根据需求做出来的