21

私のWebサイトには、マウスを置いたときに固定タイプのカーソルを設定するCSSクラスがいくつかあります。ページ上の任意の場所でAJAX呼び出しを行ったときにカーソルを待機画像に設定し、AJAX呼び出しが完了した後にカーソルを元のカーソルに戻したいと思います。

私は試した：

$(document).ajaxStart(function () {
    document.body.style.cursor = 'wait';
});

$(document).ajaxStop(function () {
    document.body.style.cursor = 'auto';
});

これは、カーソルを変更するCSSクラスを持つDOMオブジェクト上にマウスを置いた場合には機能せず、その方法に困惑しています。

現在、私はクラスを持っています：

.pills a:hover
{
    background-color: #0069D6;
    color: #FFFFFF;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
    text-decoration:none;
    cursor:pointer;
}

このクラスのオブジェクトにマウスを合わせてAjax呼び出しを開始すると、カーソルはポインターのままになります。

4

6 に答える 6

40

bodyとでクラスを切り替えることを組み合わせて使用​​できます!important。

http://jsfiddle.net/UGwmv/2/

$("button").click(function(){
   $("body").toggleClass("wait");
   return false; 
});

body.wait, body.wait *{
    cursor: wait !important;   
}

bodyにwaitクラスがある場合、すべてに待機カーソルが表示されます。

于 2012-04-24T20:30:06.760 に答える
3

ラッパーまたはコンテナーがある場合:

<script type="text/javascript">
$(document).ajaxStart(function () {
    document.body.style.cursor = 'wait';
    $('div#wrapper').addClass('wait');
});

$(document).ajaxStop(function () {
    document.body.style.cursor = 'auto';
    $('div#wrapper').removeClass('wait');
});
</script>

<style type="text/css">
    div#wrapper.wait * {
        cursor: wait !important;
    }
</style>

基本的に、ラッパーのすべての子cursor: waitは!important条件付きで取得されます。

于 2012-04-24T20:27:35.760 に答える
1

別の回答 2014:

少なくとも 1 つのスタイル シートがある場合は、それを変更してください。

CSS スタイル シートを変更します。

sh = document.styleSheets[0]
Wait_a_bit="* {cursor: wait !important}"
sh.insertRule(Wait_a_bit, 0)

あなたのajaxの前に、後でそれを削除してください：

sh.deleteRule(0)
于 2014-02-19T22:06:02.247 に答える
1

  1. ページに空の要素div#wait-overlayを追加します。<body>HTML ドキュメントの最後、終了要素の直前に追加することをお勧めします。

  2. この要素のスタイルを次のように設定します (これ.activeは意図的にあります)。

    div#wait-overlay.active
{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    cursor: wait;
    z-index: 100000;
    background: black;
    opacity: 0;
}

  3. 次に、次の JavaScript を追加します。

    $(document).ajaxStart(function () {
    $('#wait-overlay')
        .addClass('active')
        .animate({opacity: 0.6});
});

$(document).ajaxStop(function () {
    $('#wait-overlay')
    .animate(
        {
            opacity: 0
        },
        400,
        function () { $(this).removeClass('active'); }
    );
});

説明：

  1. はdiv#wait-overlay空の div であるため表示されず、ページの最後にあるため何にも影響しません。

  2. ただし、この div にクラスを追加するactiveと、ページ全体に広がり、非常に高いためz-index、ページのすべてをカバーします。これの追加の利点は、ページ上のすべてがクリックできなくなることです。

  3. JavaScript は、.activeajax の開始時にクラスを自動的に追加し、ajax が終了するとクラスを削除します。また、 を呼び出すおかげでanimate、ajax の開始時にページが徐々に暗くなり、ajax が終了すると元に戻ります。

于 2017-04-23T22:43:37.567 に答える
0

問題は、クラスがカーソルのドキュメント値を上書きすることです。これを回避するには、ホバーしたときにすべての要素に待機記号が表示されるようにする必要があります。

あなたの最善の策は、マウスの待機シンボルが必要なときに body 要素にクラスを追加することです。そのクラスが存在する場合、CSS から他のすべてのクラスを待機シンボルを表示するように設定します。

ajax が終了したら、 body タグからクラスを削除すると、さまざまなカーソル スタイルを持つ元の要素クラスが元に戻ります。

$(document).ajaxStart(function () {
    $('body').addClass('wait');
});

$(document).ajaxStop(function () {
    $('body').removeClass('wait');
});



<style type="text/css">
    body.wait .move {
        cursor: wait;
    }
</style>
于 2012-04-24T20:27:46.143 に答える
0 
    $(document).ajaxStart(function () {
        $('*').css('cursor', 'wait');
    });

    $(document).ajaxStop(function () {
        $('*').css('cursor', '');
    });

トリックを行います。

于 2017-07-12T07:55:12.010 に答える