JavaScript — выделение элемента при наведении ⇐ CSS

[Anonymous]

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

Я не могу сказать, что у меня ничего не получилось, но у меня есть два варианта: оба со своими плюсами и минусами.

Подход 1

Я обрабатываю наведение курсора мыши и просто добавьте рамку к целевому элементу. Когда я навожу курсор на другой элемент, я просто сбрасываю существующие выделенные элементы. Код для этого приведен ниже:

Код: Выделить всё

function addHighlight(target) {
target.classList.add('highlighted');
}

function removeHighlight(target) {
target.classList.remove('highlighted');
}

window.addEventListener('mouseover',function(e) {
addHighlight(e.target);
});

window.addEventListener('mouseout',function(e) {
removeHighlight(e.target);
});

Рабочий пример здесь

Плюсы этого подхода

Работает абсолютно нормально.

Минусы такого подхода

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

Подход 2

Я хотел, чтобы выделение быть бесшовным. То есть сохраняя внешний вид страницы и просто накладывая маску выделения поверх элемента.

Чтобы сделать это, в событии mouseover я динамически создал элемент маски, позиция которого установлена ​​на абсолютное значение, а его координаты установлены на точные координаты целевого элемента. Ниже мой код:

Код: Выделить всё

window.addEventListener('mouseover',function(e) {
applyMask(e.target);
});

function applyMask(target) {
if(document.getElementsByClassName('highlight-wrap').length > 0) {
resizeMask(target);
}else{
createMask(target);
}
}

function resizeMask(target) {
var rect = target.getBoundingClientRect();
var hObj = document.getElementsByClassName('highlight-wrap')[0];
hObj.style.top=rect.top+"px";
hObj.style.width=rect.width+"px";
hObj.style.height=rect.height+"px";
hObj.style.left=rect.left+"px";
// hObj.style.WebkitTransition='top 0.2s';
}

function createMask(target) {
var rect = target.getBoundingClientRect();
var hObj = document.createElement("div");
hObj.className = 'highlight-wrap';
hObj.style.position='absolute';
hObj.style.top=rect.top+"px";
hObj.style.width=rect.width+"px";
hObj.style.height=rect.height+"px";
hObj.style.left=rect.left+"px";
hObj.style.backgroundColor = '#205081';
hObj.style.opacity='0.5';
hObj.style.cursor='default';
//hObj.style.WebkitTransition='top 0.2s';
document.body.appendChild(hObj);
}

function clearMasks() {
var hwrappersLength = document.getElementsByClassName("highlight-wrap").length;
var hwrappers = document.getElementsByClassName("highlight-wrap");
if(hwrappersLength > 0) {
for(var i=0; i

Подробнее здесь: [url]https://stackoverflow.com/questions/51925804/javascript-highlight-an-element-on-hover[/url]