Possível duplicado:
Como tornar esse JavaScript muito mais rápido?

Estou tentando criar um "seletor de elementos" no jQuery, como o Firebug. Basicamente, quero destacar o elemento abaixo do mouse do usuário. Aqui está o que eu tenho até agora, mas não está funcionando muito bem:

$('*').mouseover(function (event) {
    var $this = $(this);
    $div.offset($this.offset()).width($this.width()).height($this.height());
    return false;
});


var $div = $('<div>')
    .css({ 'background-color': 'rgba(255,0,0,.5)', 'position': 'absolute', 'z-index': '65535' })
    .appendTo('body');

Basicamente, estou injetando uma div no DOM que possui um plano de fundo semitransparente. Em seguida, ouço o evento mouseover em cada elemento e movo a div para que cubra esse elemento.

No momento, isso faz com que a página inteira fique vermelha assim que você move o mouse sobre a página. Como faço para que isso funcione melhor?

Editar: Certamente, o problema é que, assim que meu mouse toca a página, o corpo é selecionado e, quando movo o mouse, nenhum momento passa pelo marcador, porque está sobre tudo.

Firebug

Ao pesquisar no código fonte do Firebug, encontrei o seguinte:

drawBoxModel: function(el)
{
    // avoid error when the element is not attached a document
    if (!el || !el.parentNode)
        return;

    var box = Firebug.browser.getElementBox(el);

    var windowSize = Firebug.browser.getWindowSize();
    var scrollPosition = Firebug.browser.getWindowScrollPosition();

    // element may be occluded by the chrome, when in frame mode
    var offsetHeight = Firebug.chrome.type == "frame" ? FirebugChrome.height : 0;

    // if element box is not inside the viewport, don't draw the box model
    if (box.top > scrollPosition.top + windowSize.height - offsetHeight ||
        box.left > scrollPosition.left + windowSize.width ||
        scrollPosition.top > box.top + box.height ||
        scrollPosition.left > box.left + box.width )
        return;

    var top = box.top;
    var left = box.left;
    var height = box.height;
    var width = box.width;

    var margin = Firebug.browser.getMeasurementBox(el, "margin");
    var padding = Firebug.browser.getMeasurementBox(el, "padding");
    var border = Firebug.browser.getMeasurementBox(el, "border");

    boxModelStyle.top = top - margin.top + "px";
    boxModelStyle.left = left - margin.left + "px";
    boxModelStyle.height = height + margin.top + margin.bottom + "px";
    boxModelStyle.width = width + margin.left + margin.right + "px";

    boxBorderStyle.top = margin.top + "px";
    boxBorderStyle.left = margin.left + "px";
    boxBorderStyle.height = height + "px";
    boxBorderStyle.width = width + "px";

    boxPaddingStyle.top = margin.top + border.top + "px";
    boxPaddingStyle.left = margin.left + border.left + "px";
    boxPaddingStyle.height = height - border.top - border.bottom + "px";
    boxPaddingStyle.width = width - border.left - border.right + "px";

    boxContentStyle.top = margin.top + border.top + padding.top + "px";
    boxContentStyle.left = margin.left + border.left + padding.left + "px";
    boxContentStyle.height = height - border.top - padding.top - padding.bottom - border.bottom + "px";
    boxContentStyle.width = width - border.left - padding.left - padding.right - border.right + "px";

    if (!boxModelVisible) this.showBoxModel();
},

hideBoxModel: function()
{
    if (!boxModelVisible) return;

    offlineFragment.appendChild(boxModel);
    boxModelVisible = false;
},

showBoxModel: function()
{
    if (boxModelVisible) return;

    if (outlineVisible) this.hideOutline();

    Firebug.browser.document.getElementsByTagName("body")[0].appendChild(boxModel);
    boxModelVisible = true;
}

Parece que eles estão usando um div + css padrão para desenhá-lo ... só precisam descobrir como estão lidando com os eventos agora ... (esse arquivo tem 28K linhas de comprimento)

Há também esse trecho, que eu acho que recupera o objeto apropriado ... embora eu não possa descobrir como. Eles estão procurando por uma classe "objectLink-element" ... e não tenho idéia do que seja esse "repObject".

onMouseMove: function(event)
{
    var target = event.srcElement || event.target;

    var object = getAncestorByClass(target, "objectLink-element");
    object = object ? object.repObject : null;

    if(object && instanceOf(object, "Element") && object.nodeType == 1)
    {
        if(object != lastHighlightedObject)
        {
            Firebug.Inspector.drawBoxModel(object);
            object = lastHighlightedObject;
        }
    }
    else
        Firebug.Inspector.hideBoxModel();

},

Estou pensando que talvez, quando o evento mousemove ou mouseover for acionado para o nó marca-texto, de alguma forma eu possa repassá-lo. Talvez para o nó que está cobrindo ...?

Se eu posicionar um elemento invisível acima de cada elemento com um índice z maior do que o meu marcador, mas fornecer ao meu marcador um índice z maior do que os elementos reais ... teoricamente, ele deve funcionar. Os elementos invisíveis dispararão o evento do mouse, mas o efeito de destaque ainda parecerá sua sobreposição dos elementos reais.

No entanto, isso significa que apenas dobramos os elementos DOM e o posicionamento deve estar correto.A menos que talvez eu apenas "levante" os elementos que o marcador está cobrindo atualmente? Mas isso ainda pode ser todo elemento>. <Alguém me ajude!