Блог

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

1. При нажатии он должен возвращать html-разметку и css-стили этого конкретного элемента.
2. При наведении курсора мыши он должен выделить конкретный элемент (точно так же, как inspector в 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 amp;amp; this.parentNode.hasAttribute("class"))
        {
        divs[i].addEventListener('mouseover', function(){
        this.parentNode.classList.removeClass('h');
        }); 
        }
  

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

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

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

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

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

Здесь говорится, что если наведен указатель мыши на элемент с классом h, установите цвет фона. Вы добавляете класс «h» к родительскому с

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

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

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');