javascript - JSを使用してカスタマイズ画像カーソルを垂直線でスナップするにはどうすればよいですか？

Question

効果はFacebookのタイムラインに似ており、青い縦線の近くにマウスを移動すると、青い十字に変わり、クリックすると投稿を追加できます。

次のようなcssを使用してカーソルをカスタマイズできることはわかっています：cursor：url（'cross.png'）、auto; しかし、Webページ上のカーソルを制御して、垂直方向にのみ移動させる方法はありますか？ありがとう

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

});