Как выбрать определенный элемент в DOM, а не его родительский элемент, используя js

Question

Я пытаюсь создать расширение Chrome, которое можно использовать для проверки элементов на любой веб-странице. Он должен иметь две функции -

1. При нажатии должен быть возвращен стиль HTML-разметки и CSS этот конкретный элемент.
2. При наведении, он должен выделять конкретный элемент (так же, как Инспектор в Chrome Dev Tools)

Я достиг первой части, но я не могу достичь второй части. Я новичок в JS и пытаюсь выполнить задачу наведения мыши, используя простой JS, без какого-либо jQuery.

Это мой файл скрипта контента

console.log("Chrome extension loaded");

var all = document.body.getElementsByTagName('*');
var divs = document.body.getElementsByTagName('*');

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.h:hover { background-color: #83aff7; }';
document.getElementsByTagName('head')[0].appendChild(style);

// for click events and functionality
for (var i = 0, max = all.length; i < max; i++)
{
    all[i].addEventListener("click",function() {
        console.log(this);
        console.log(window.getComputedStyle(this));
    });
}

// for hover event
for (var i = 0, ma=divs.length; i <ma; i++)
    {

        (divs[i]).addEventListener('mouseover', function(){
        this.classList.add('h');
        });

        if(this.parentNode && this.parentNode.hasAttribute("class"))
        {
        divs[i].addEventListener('mouseover', function(){
        this.parentNode.classList.removeClass('h');
        }); 
        }

Часть событий щелчка работает нормально, но при наведении курсора меняется цвет родителя, а также элемента. Должен измениться только цвет определенного элемента, находящегося на поверхности.

Заранее спасибо!

Answer 1

Вы можете использовать «addEventListener» для достижения «наведения мыши» на элемент

Answer 2

Вам нужно отредактировать свой стиль CSS

style.innerHTML = '.h:hover { background-color: #83aff7; }';

Это говорит о том, что при наведении элемента с классом h задайте цвет фона.Вы добавляете класс "h" к родителю с помощью

$(this).parent().addClass('h');

CSS ПРАВИЛО 1 (если родительский класс класса И родительский элемент находится, цвет фона):

style.innerHTML = '.h:hover *{ background-color: #83aff7; }';

CSS ПРАВИЛО 2 (если родитель имеет класс h, и элемент находится в подчиненном состоянии):

style.innerHTML = '.h *:hover{ background-color: #83aff7; }';

Обязательно выберите подходящее для вас правило.

Работа с JS Fiddle с обоими примерами (ваш исходный CSS - это третье поле): https://jsfiddle.net/nsevpqd9/

Если вы вообще не хотите редактировать свой стиль CSS, добавьте класс к самому элементу, а не к родительскому: $(this).addClass('h');