Получение более точного выбора цели из события mousemove

Question

В настоящее время я разрабатываю расширение Chrome, и часть этого имеет элементы, выделенные по мере их наложения пользователем, подобно инструментам селектора инструментов DOM разработчика, встроенным в браузер.

В настоящее время Мне удалось реализовать два решения: одно, которое добавляет и удаляет границу для выбранного элемента, на самом деле это работает очень хорошо, но я тоже пытался сделать это с наложением. В настоящее время у меня есть полу-рабочее решение для наложения, но оно не настолько близко или точно, как граница. На данный момент у меня есть этот код для границы:

Идея этого решения состоит в том, чтобы захватить событие mouseover, найти элемент над мышью и вставить div, который будет полупрозрачным внутри, заполняя тот же размер, и затем удалите его после

var overlay =  $('<div></div>',{id: "8b29f35f-6cc6"});
$(overlay).css(({
    position: 'absolute',
    display:'block',
    width: '100%',
    height: '100%',
    top: '0',
    left: '0',
    right: '0',
    bottom: '0',
    background: 'rgba(55,22,124,0.5)',
    zindex: '1000000',
    cursor: 'pointer'}));

var CurrentItem;
$('body').mousemove(function(evt){
    CurrentItem = evt.target
});

selecting = setInterval(function(){
    $("#8b29f35f-6cc6").remove();
    currentElement = CurrentItem;
    $(currentElement).append(overlay);
}, 100);

Однако при таком подходе многие элементы не получают оверлей, и часто с сайтами, такими как, например, переполнение стека, оверлей просто равен идет прямо по большей части содержимого, а не по отдельным элементам DOM. как показано ниже, вы не можете видеть, потому что мышь не показана, но в основном она всегда работает с гораздо большими элементами DOM, чем с маленькими, которые я на самом деле поместил над