Javascript 如何在悬停的div周围添加边框最好在单击扩展弹出窗口上的按钮后激活该功能？

我想让用户可以将鼠标悬停在页面上的div上，并在悬停的div周围临时显示一个边框

事实上，我正在为所有的div添加样式，但这并不理想

div:hover {
    outline: 1px solid blue;
}

当用户单击弹出窗口上的按钮时，最好激活此模式 如下图所示

经过研究，我发现这个问题与类似的情况有关

对于本期，示例如下（改编自链接问题）：

popup.js（在弹出窗口中链接）：

然后，您可以通过应用程序的清单文件将

content.js

包含到每个（或您首选的）站点中：

"content_scripts": [
    {
      "matches": ["https://airbnb.com/*"],    //or "matches": ["<all_urls>"]
      "js": ["js/content.js"]
    }
]

说明：
popup.js侦听弹出窗口中按钮ID

#yourButton

的

onClick

事件。如果触发，消息事件将通过管道传输到当前选定的选项卡，并由content.js处理，该选项卡通过扩展的清单链接到站点。然后，该脚本创建一个新的

元素，将CSS粘贴到其中，并将其附加到DOM的

部分。

---

我希望我能帮忙

如果动态添加CSS类，则可以执行此操作

element.classList.remove（“nameClass”）
元素.classList.add（“nameClass”）；

mdn类列表：<>

例如：

让isEnabledHover=false；
让main=document.getElementById（'myMain'）；
函数myFunction（）{
如果（isEnabledHover）{
isEnabledHover=false；
for（var i=0；i

.userequireOrder:悬停{
轮廓：1px纯蓝色；
}

启用悬停元素
你好，世界
你好，世界
你好，世界
你好，世界

否该按钮将激活该功能。基本上，一旦激活，用户可以将鼠标悬停在页面上的任何div上，它会临时添加一个边框。基本上在悬停的div上添加一个边框（如图所示）。非常感谢您的回答，无需指明Airbnb。它应该适用于用户激活extension@AziCode然后您可以只使用

“匹配项”：[“”]

。

"content_scripts": [
    {
      "matches": ["https://airbnb.com/*"],    //or "matches": ["<all_urls>"]
      "js": ["js/content.js"]
    }
]

chrome.runtime.onMessage.addListener(function(request) {
    if (request.action === 'injectCSS') {
        var css = document.createElement('style');
        css.innerHTML = 'div:hover { outline: 1px solid blue; }';
        document.head.appendChild(css);
    }
});