如何在懸停的 div 周圍添加邊框，最好在單擊擴展彈出窗口上的按鈕后激活該功能？

Question

我想讓用戶在頁面上的 div 上使用 hover 並在懸停的 div 周圍臨時出現邊框

我實際上正在為所有 div 添加樣式，但這並不理想

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

當用戶單擊彈出窗口上的按鈕時，最好激活此模式，如下圖所示

Answer 1

經過研究，我發現這個問題與類似情況有關。

對於此問題，示例如下所示（改編自鏈接問題）：

popup.js（在您的彈出窗口中鏈接）：

document.getElementById('yourButton').addEventListener('click', function() {
    chrome.tabs.query({active: true, currentWindow: true}, function(activeTabs) {
        chrome.tabs.sendMessage(activeTabs[0].id, { action: 'injectCSS' });
    });
});

然后您可以通過應用程序的清單文件將content.js包含到每個（或您喜歡的）站點中：

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

內容.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);
    }
});

解釋：
popup.js偵聽彈出窗口中按鈕 ID #yourButton的onClick事件。 如果觸發，消息事件將通過管道傳輸到當前選定的選項卡並由content.js處理，它通過您的擴展程序清單鏈接到站點。 然后，此腳本創建一個新的<style>元素，將 CSS 粘貼到其中並將其附加到 DOM 的<head>部分。

我希望我能幫上忙！

Answer 2

如果您動態添加 CSS class，則可以執行此操作。

element.classList.remove("nameClass")
element.classList.add("nameClass");

mdn classList: < https://developer.mozilla.org/en-US/docs/Web/API/Element/classList >

例子：

 let isEnabledHover = false; let main = document.getElementById('myMain'); function myFunction() { if (isEnabledHover) { isEnabledHover = false; for (var i = 0; i < main.children.length; i++) { main.children[i].classList.remove("useRequireBorder"); } } else { isEnabledHover = true; for (var i = 0; i < main.children.length; i++) { main.children[i].classList.add("useRequireBorder"); } } }

 .useRequireBorder:hover{ outline: 1px solid blue; }

 <div id="myMain"> <div> <button onClick="myFunction()">enabled hover element</button> </div> <div> <h1>Hello World</h1> </div> <div> <h2>Hello World</h2> </div> <div> <h3>Hello World</h3> </div> <div> <h4>Hello World</h4> </div> </div>

如何在懸停的 div 周圍添加邊框，最好在單擊擴展彈出窗口上的按鈕后激活該功能？

問題描述

2 個解決方案

解決方案1
1 2021-02-10 23:58:23

解決方案2
0 2021-02-11 00:02:28

如何在懸停的 div 周圍添加邊框，最好在單擊擴展彈出窗口上的按鈕后激活該功能？

問題描述

2 個解決方案

解決方案1 1 2021-02-10 23:58:23

解決方案2 0 2021-02-11 00:02:28

解決方案1
1 2021-02-10 23:58:23

解決方案2
0 2021-02-11 00:02:28