Kann ich Text dynamisch neben dem Mauszeiger über JavaScript hinzufügen?

Question

Gerade habe ich das Cursorbild geändert, wenn ein Ajax-Vorgang im Gange ist, unter Verwendung dieses JavaScript-Codes:

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

und unten die CSS:

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

Jetzt möchte ich auch etwas Text neben dem Cursor hinzufügen. Und es entfernen, wenn das Ajax beendet ist. Wie ist das möglich, ohne ein jQuery-Plugin zu verwenden?

Answer 1

Versuchen Sie dies:

Demo mit Start- / Stoppfunktionen und Textänderung

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

Answer 2

Siehe http://jsfiddle.net/PbAjt/show/:

CSS:

#cursorText{
    position:absolute;
    border:1px solid blue; /* Du kannst es entfernen */
}

JavaScript:

document.body.onmousemove=moveCursor;
var curTxt=document.createElement('div');
curTxt.id="cursorText";
curTxt.innerHTML="Hallo!"; /* Oder was auch immer du willst */
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';
}

Je nachdem, was du möchtest, kannst du ändern

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

zu

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

und

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

zu

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

Answer 3

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:

Nachricht

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');
    });
});

Ereignis DOC: http://api.jquery.com/mousemove/

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