javascript - 如何使用 JS 用垂直线捕捉自定义图像光标？

Question

效果类似于 Facebook 时间线，将鼠标移动到蓝色竖线附近，它会变成一个蓝色十字，点击后可以添加帖子。

我知道我可以使用 css 自定义光标，例如： cursor:url('cross.png'), auto; 但是有没有一种方法可以控制网页上的光标，并使其仅垂直移动？谢谢

Answer 1

我认为您不能使用 JS 更改光标位置，并且据我所知，使用 png 作为光标对浏览器不友好。

所以最好的解决方案是使用 cursor:none; 在你的 CSS 中隐藏光标。因此，您可以在所需位置显示图像，并使用 mousemove 事件更改它的 y 位置。

例如在 CSS 中

.line{position:relative;cursor:none;}
.btn-plus{background:url('cursor.png') no-repeat;position:absolute;}

在js中

$('.line').mousemove(function(e){
    var btn_cross = $(this).find('.btn-plus');

    if (btn_cross.length == 0)
    {

        btn_cross = $('<div class="btn-plus"></div>');

        $(this).append(btn);

        btn_cross.mouseenter(function(){

            e.stopPropagation();

        });

    }

    btn_cross.css('top', e.pageY-$(this).offset().top+'px');

});