3

マウスが特定の要素の上に置かれたときに、マウス カーソルをカスタム イメージに置き換えたいと思います。最初にマウスカーソルをオフに設定することでそれを行います

cursor: none;

要素をホバリングしたとき。

次に、ホバーされた要素のカーソル位置を読み取り、グラフィックの css 位置をカーソル位置にわずかにオフセットして設定し、マウス カーソルがグラフィック上ではなくホバー領域上にあるようにします。

ここでフィドルを作成しました： http://jsfiddle.net/TimG/6XeWK/

今では静かに動作します。問題は、マウスを非常に速く動かすと、マウスカーソルがホバー領域を離れ、画像上で「滑り」、ホバー領域に対するマウスの位置を決定することがもちろん不可能になることです（左下に非常に速く移動します黒いホバー領域で）。グラフィックを

display: none;

画像の css 位置が変更される前と変更された後、

display: block;

また。残念ながら、この問題を完全に防ぐことはできません。

だから：これを防ぐ方法はありますか？または、マウスカーソルを手の後ろに置く方法はありますか? マウス カーソルに z-index を設定するようなものです (DOM 要素ではないため、それは不可能だと思います)。

助けてくれてありがとう。

4

1 に答える 1

3

質問

マウスカーソルを手の後ろに置く方法はありますか?

マウスを速く動かしたときにマウス ポインターが表示されるのは、カーソルがポインターの上にある場合があり、.hoverbox:hoverスタイルが適用されないためです。

mousemoveイベント バインディングで css スタイルをポインタにcursor: none も追加すると、誤って手の上を移動した場合でも、マウス ポインタがまったく表示されなくなります。cursor: noneCSS のに を適用し.pointer:hoverてもうまくいきません。

$(".hoverBox").mousemove(function(e) {
    var tWidth = $(window).width();
    var position = $(this).position();
    var fingerPosition = position.top + e.clientY + 15;
    var fingerWidth = $(this).parent().find('.pointer').width();

    $('.pointer').css('display', 'none').css('top', fingerPosition).css('left', e.clientX - fingerWidth - 15).css('display', 'block').css('cursor', 'none');
});

デモ- ポインター上でカーソルを非表示にする

編集
をフィドラーで動作させることができませんでしたが、cursor: url()これは主に、フィドラーが出力トラフfiddle.jshell.netをレンダリングし、画像がサーバーに対してローカルである必要があるという事実によるものだと思います。

しかし、使いたいのがポインター ハンドだけの場合は、常に も使用できますcursor: pointer style。

CSS:

.hoverBox {
    width: 400px;
    height: 300px;
    background: black;
    cursor: pointer;
}

デモ- デフォルトのポインター カーソルの使用

于 2012-08-24T12:07:22.350 に答える