Подсветка элементов страницы при наведении курсора

Я ищу либо уже доступное решение с открытым исходным кодом, либо кого-то, кто укажет мне правильное направление, чтобы найти это. Я создаю расширение Firefox, которое работает с элементами из DOM. В Firefox и Chrome есть инспекторы элементов, которые выделяют область и/или элемент, над которым в данный момент находится ваша мышь, например, div, над которым он в данный момент находится, или кнопку, если она наведена на него. Я ищу, как реализовать эту функциональность в моем собственном расширении. Дайте мне знать, если есть какие-либо решения для этого, спасибо!


javascript firefox highlight firefox-addon onmouseover
person maxveldink    schedule 05.02.2014    source источник

Ответы (2)


arrow_upward
0
arrow_downward

попробуйте что-то вроде этого:

var lastBoxedEl;

function moused(e) {
    var target = e.target; //experiment, try e.currentTarget, e.originanalTarget
    if (lastBoxedEl) {
        lastBoxedEl.style.outline = 'none'
    }
    lastBoxedEl = target;
    target.style.outline = '5px solid red';
}
document.body.addEventListener('mouseover', moused, false);
person Noitidart    schedule 06.02.2014
comment
также см. эту тему: мы обсуждаем события mouseenter и mouseleave: stackoverflow.com/a/21619481/1828637 - person Noitidart; 08.02.2014
comment
я также исправил ошибку в коде, я забыл установить lastBoxedEl для цели, чтобы он не удалял контур - person Noitidart; 08.02.2014

arrow_upward
0
arrow_downward

Я сделал что-то в прошлом для демонстрации. Вот исходник, открытый по вашему запросу:

https://github.com/kashiif/hilight-dom-element-on-hover

Обратите внимание, что это не завершено и может потребовать завершения, например:

  1. Красное поле остается после щелчка элемента.
  2. Элемент немного перетекает, потому что добавляется граница. Вы можете изменить класс box таким образом, чтобы box-sizing был установлен на border-box

Если хотите, вы можете отправить мне запрос на внесение изменений.

person Kashif    schedule 06.02.2014