設置光標在點擊後等待

Question

當我點擊一個按鈕時，光標不會改變加載。任何想法如何實現這一目標？

這裏是我的代碼：

<div class="signup"> 
    <input type="submit" value="Sign Up" title="SignUp" id="SignUp" class="btn" /> 
</div> 

的CSS

#SignUp 
{ 
    float: left; 
    padding-left: 20px; 
    padding-right: 20px; 
    padding-bottom: 20px; 
    vertical-align: central; 
    margin-top: 0px; 
    width: 100px; 
    color: white; 
    background-color: #5BB75B; 
    background-image: -moz-linear-gradient(top, #62C462, #51A351); 
    background-image: -ms-linear-gradient(top, #62C462, #51A351); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62C462), to(#51A351)); 
    background-image: -webkit-linear-gradient(top, #62C462, #51A351); 
    background-image: -o-linear-gradient(top, #62C462, #51A351); 
    background-image: linear-gradient(top, #62C462, #51A351); 
    background-repeat: repeat-x; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#51a351', GradientType=0); 
    border-color: #51A351 #51A351 #387038; 
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); 
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 
    margin-left: 10%; 
} 

Answer 1

您可以綁定到使用jQuery按鈕的onclick事件，然後設置一類對身體/頁的內容，這將導致光標正在等待。

// Javascript 
$(function() { 
    $('input#SignUp').click(function() { 
    $('body').addClass('cursor_wait'); 
    } 
}); 

/* CSS */ 
.cursor_wait { 
    cursor: wait 
}