Question

我正在尝试创建一个chrome扩展程序，该扩展程序可用于检查任何网页上的元素。它应该具有两个功能-

点击后，它应返回的HTML标记和CSS样式该特定元素。
悬停时，它应突出显示特定元素（就像 chrome开发工具中的检查器）

我已经达到了第一部分，但是我却没有达到第二部分。我是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

您需要编辑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');

Answer 2

您可以使用“ addEventListener”实现对元素的“鼠标悬停”

如何使用JS选择DOM中的特定元素而不是其父元素

2 个答案: