Question

我在网站上实现了一些滑块，当鼠标悬停在滑块上时，会出现一个拖动指示符并跟随光标。先前，这是正常的，但是在开发期间它已经停止工作，甚至通过删除代码和样式区域来尝试找到问题，我处于死胡同。

当鼠标悬停在.issue-carousel或.archive-carousel上时，拖动指示符应该跟随光标。拖动指示器有一类.issue-carousel-drag-indicator或.article-carousel-drag-indicator，具体取决于您悬停的滑块。

我不认为这是一个jquery问题，因为我可以看到当光标移动时顶部和左侧参数发生变化，而css似乎也很好，就好像我移除了它所出现的位置：绝对元素（但是不动了）。特别奇怪的是，一旦悬停发生，它似乎在页面底部绘制一些空白区域，其中显示拖动指示器，如果你快速滚动，这很明显。

任何人都可以提供任何见解吗？

Staging link

.archive-carousel {
    cursor: grab;
    .carousel-cell {
        overflow: hidden;
        img {
            height: 400px;
        }
    }
    &:hover {
        ~ .archive-carousel-drag-indicator {
            visibility: visible;
            opacity: 1;
        }
    }
}

.issue-carousel-drag-indicator,
.archive-carousel-drag-indicator {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    background-color: $red;
    z-index: 9999;
    backface-visibility: hidden;
}





/* Drag indicator follow cursor */
$('.archive-carousel, .archive-carousel-drag-indicator').on({
    mousemove: function(e) {
        $('.archive-carousel-drag-indicator').css({
            left: e.pageX,
            top: e.pageY
        });
    },
    click: function() {
       $('.archive-carousel-drag-indicator').fadeOut(300);
    }
});

$('.issue-carousel, .issue-carousel-drag-indicator').on({
    mousemove: function(e) {
        $('.issue-carousel-drag-indicator').css({
            left: e.pageX,
            top: e.pageY
        });
    },
    click: function() {
       $('.issue-carousel-drag-indicator').fadeOut(300);
    }
});

Div跟随光标不在父级内但在页面底部？

0 个答案: