Dear experts,

I wanted have a dynamic division of content follow you with the cursor in the web browser space.

I am not a pro at JS so I spent 2 hours to finally debugged a very stupid way to accomplish this.

$(document).ready(function () {
    function func(evt) {
        var evt = (evt) ? evt : event;
        var div = document.createElement('div');

        div.style.position = "absolute";

        div.style.left = evt.clientX + "px";

        div.style.top = evt.clientY + "px";
        $(div).attr("id", "current")

        div.innerHTML = "CURSOR FOLLOW TEXT";

        $(this).append($(div));

        $(this).unbind()
        $(this).bind('mousemove', function () {
            $('div').remove("#current");

        });

        $(this).bind('mousemove', func);

    }

    $("body").bind('mousemove', func)
});

As you can see this is pretty much Brute force and it slows down the browser quite a bit. I often experience a lag on the browser as a drag my mouse from one place to another.

Is there a way to accomplish this easier and faster and more intuitive.

I know you can use the cursor image technique but thats something I'm looking to avoid.

Thanks in advance.