Question

To do this I wrote a script that works fine but only for slow motions of mouse, whenever it goes fast it becomes buggy, what can I improve in this script? Any recommandation?

$(document).ready(function() {
    $.random = function() {return Math.floor(Math.random()*Math.pow(10,17))}

    $.fn.addOverlay = function() {
        $("<div class='overlay'></div>")
                .css({'position': 'absolute', 'background-color': '#9fc4e7', 'opacity': 0.3, 'top': $(this).offset().top, 'left': $(this).offset().left, 'width': $(this).width(), 'height': $(this).height()})
                .attr('overlayId',overlayId)
                .appendTo('body')
                .mouseleave(function(){
                    $(this).remove();
                    $('.overlay').each(function(){
                        if($(this).attr('overlayId')==overlayId) {
                            $(this).remove()
                        }
                    })
                });
        return this
    }

    $('div:not(.overlay),span,h1,h2,h3,h4,table,td,tr,p')
        .mouseenter(function(event){
            event.stopPropagation();
            overlayId = Math.random();
            $(this).addOverlay()
            .find('div,span,h1,h2,h3,h4,table,td,tr,p').each(function(){
                $(this).addOverlay(overlayId)
            })
        })

});

Answer 1

Finally I found the way to do it right, I put it here for anyone who land here 😉
(you can injecte the script in this page to try it ;-))

$(document).ready(function() {
        $.random = function() {return Math.floor(Math.random()*Math.pow(10,17))}
        $.z_index = 1;
        $.data_ = Array();

        $.fn.addOverlay = function(id) {
            $("<div class='overlay' id='"+id+"'></div>")
                    .css({'z-index': $.z_index, 'position': 'absolute', 'background-color': '#9fc4e7', 'opacity': 0.1, 'border': '2px solid black', 'top': $(this).offset().top, 'left': $(this).offset().left, 'width': $(this).outerWidth(), 'height': $(this).outerHeight()})
                    .appendTo('body');
            $.z_index = $.z_index+1;
            return this
        }

        $('div,span,h1,h2,h3,h4,table,td,tr,a,ul,li,ol,input,textarea,p,code,img').each(function(){
            rand = $.random();
            $(this).attr('DOMId',rand);
            $.data_.push(Array(
                rand,
                {'x': $(this).offset().left,                        'y': $(this).offset().top},
                {'x': $(this).offset().left+$(this).outerWidth(),   'y': $(this).offset().top},
                {'x': $(this).offset().left+$(this).outerWidth(),   'y': $(this).offset().top+$(this).outerHeight()},
                {'x': $(this).offset().left,                        'y': $(this).offset().top+$(this).outerHeight()},
                false
            ))
        });

        $(document).mousemove(function(e){
            for (i in $.data_) {
                x = e.pageX;
                y = e.pageY;
                if((x>$.data_[i][1].x) & (x<$.data_[i][2].x) & (y>$.data_[i][1].y) & (y<$.data_[i][3].y) & (!$.data_[i][5]))  {
                    $('[DOMId="'+$.data_[i][0]+'"]').addOverlay($.data_[i][0]);
                    $.data_[i][5] = true;
                } else if(((x<$.data_[i][1].x) | (x>$.data_[i][2].x) | (y<$.data_[i][1].y) | (y>$.data_[i][3].y)) & ($.data_[i][5])) {
                    $('#'+$.data_[i][0]).remove();
                    $.data_[i][5] = false;  
                }
            }
        })
});