Chuột con trỏ bộ sử dụng jQuery/CSS không thay đổi cho đến khi con chuột di chuyển

Question

Trong mã của tôi, tôi sử dụng jQuery/CSS để thiết lập và unset các 'chờ' con trỏ chuột với đoạn mã sau:

function setWaitCursor() { 
    $('body').css('cursor', 'wait'); 
    } 

    function setDefaultCursor() { 
    $('body').css('cursor', ''); 
    } 

tôi sử dụng mã này để thay đổi con trỏ chuột trong một thời gian dài:

setWaitCursor(); 

... do stuff that takes a few seconds ... 

setDefaultCursor(); 

Mã này dường như không hoạt động trừ khi bạn di chuyển chuột (ít nhất là cho Chrome trên Win 10). Nếu con chuột không được di chuyển sau khi setDefaultCursor được gọi, con trỏ sẽ hiển thị con trỏ 'chờ' cho đến khi con chuột được di chuyển (hoặc ngược lại).

Ví dụ: https://jsfiddle.net/antonyakushin/0jv6rqkf/

Trong fiddle này, những thay đổi con trỏ trong 2 giây sau khi liên kết là nhấp vào. Nếu bạn không di chuyển chuột khi bạn nhấp vào liên kết, con trỏ sẽ không thay đổi.

Cách tốt nhất để giải quyết vấn đề này là gì, do đó ngay cả khi con chuột không được di chuyển con trỏ sẽ bị thay đổi?

Answer 1

Một số yếu tố có kiểu con trỏ mặc định. Vì vậy, wile thay đổi kiểu con trỏ, chúng ta cũng cần phải thay đổi kiểu đó.

$(document).ready(function() { 
    function setWaitCursor(elem) { 
    elem.css('cursor', 'wait'); 
    $('body').css('cursor', 'wait'); 
    } 
    function setDefaultCursor(elem) { 
    elem.css('cursor', ''); 
    $('body').css('cursor', ''); 
    } 
    $('#testLink').on('click', function() { 
    var x = $(this) 
    setWaitCursor(x); 
    setTimeout(function() { 
     setDefaultCursor(x); 
    }, 5000); 
    return false; 
    }); 
}); 

Demo fiddle

Answer 2

Chỉ cần thay đổi body-*. Nó sẽ được áp dụng cho tất cả các yếu tố.

Fiidle Demo

đoạn Code:

$(document).ready(function() { 
 

 
    function setWaitCursor() { 
 
    $('*').css('cursor', 'wait'); 
 
    } 
 

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

 
    $('#testLink').on('click', function() { 
 
    setWaitCursor(); 
 
    setTimeout(function() { 
 
     setDefaultCursor(); 
 
    }, 2000); 
 
    return false; 
 
    }); 
 

 
});

body { 
 
    min-width: 500px; 
 
    min-height: 500px; 
 
    background-color: gray; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<div id="mouseContainer"> 
 
    <a href="#" id="testLink">Test Link</a> 
 
</div>