我可以通過JavaScript動態添加鼠標光標旁邊的文本嗎？

Question

現在，我使用這個JavaScript代碼

$(function(){ 
    $("html").bind("ajaxStart", function(){ 
    $(this).addClass('busy'); 
    }).bind("ajaxStop", function(){ 
    $(this).removeClass('busy'); 
    }); 
}); 

及以下CSS

html.busy, html.busy * { 
     cursor: wait !important; 
    } 

現在我要新增一些文字光標變過光標圖像是否所有Ajax是一個過程。當ajax完成時將其刪除。沒有使用任何jQuery插件，這怎麼可能？

Answer 1

試試這個：

與演示開始/停止功能和更改文本

http://jsfiddle.net/SY4mv/18/

Answer 2

CSS：

#tooltip { 
    position: fixed; 
    background-color: black; 
    color: white; 
    padding: 2px; 
    opacity: 0; 
    -webkit-border-radius: 3px;  
    border-radius: 3px; 
    -webkit-transition: opacity 0.3s ease-in-out; 
    -moz-transition: opacity 0.3s ease-in-out; 
    -ms-transition: opacity 0.3s ease-in-out; 
    -o-transition: opacity 0.3s ease-in-out; 
    transition: opacity 0.3s ease-in-out; 
} 

html.busy #tooltip { opacity: 1 } 

html.busy, html.busy * { 
     cursor: wait !important; 
    } 

HTML：

<div id="tooltip">Message</div> 

JS：

$(function() { 
    $("html").bind("ajaxStart", function() { 
     $(this).addClass('busy'); 
     $(this).bind('mousemove', function(event) { 
      $('#tooltip').css({ 
       top: event.pageY - $('#tooltip').height() - 5, 
       left: event.pageX 
      }); 
     }); 
    }).bind("ajaxStop", function() { 
     $(this).removeClass('busy'); 
     $(this).unbind('mousemove'); 
    }); 
}); 

事件DOC：http://api.jquery.com/mousemove/

DEMO：http://jsfiddle.net/RGNCq/1/

Answer 3

見http://jsfiddle.net/PbAjt/show/：

CSS：

#cursorText{ 
    position:absolute; 
    border:1px solid blue; /* You can remove it*/ 
} 

的JavaScript：

document.body.onmousemove=moveCursor; 
var curTxt=document.createElement('div'); 
curTxt.id="cursorText"; 
curTxt.innerHTML="Hello!"; /* Or whatever you want */ 
document.body.appendChild(curTxt); 
var curTxtLen=[curTxt.offsetWidth,curTxt.offsetHeight]; 
function moveCursor(e){ 
    if(!e){e=window.event;} 
    curTxt.style.left=e.clientX-curTxtLen[0]+'px'; 
    curTxt.style.top=e.clientY-curTxtLen[1]+'px'; 
} 

取決於你想要什麼，你可以改變

curTxt.style.left=e.clientX-curTxtLen[0]+'px'; 

到

curTxt.style.left=e.clientX+'px'; 

和

curTxt.style.top=e.clientY-curTxtLen[1]+'px'; 

到

curTxt.style.top=e.clientY+'px';