像 JavaScript 中的 Chrome Dev Tools 一樣突出顯示 HTML 元素

Question

狼群！

我想突出顯示我懸停在上面的任何元素，就像 Chrome 開發工具所做的那樣。

Chrome 開發工具圖片

請注意整個元素是如何浸透藍色調的？ 這不像添加背景顏色或線性漸變那么簡單，因為輸入元素的內部仍然是白色的。

我嘗試過使用不同的過濾方法，如色調旋轉、對比度 w/亮度，甚至THIS MONSTER ，但似乎沒有任何效果。

我最接近的是一個漂亮的框陰影圍繞元素突出顯示。

Javascript: element.classList.add('anotherClass')

CSS: box-shadow: 0 0 5px #3fd290, 0 0 10px #36A9F7, 0 0 15px #36A9F7, 0 0 20px #36A9F7 !important;

幫助我實現我的夢想

Answer 1

如果有人關心我做了什么來解決它，這是我的代碼（感謝 Roope 的幫助）：

在鼠標輸入：

highlightElement(event){
  const hoverableElements = document.querySelectorAll('[data-attr]');
  for(let elm of hoverableElements){
    const styles = elm.getBoundingClientRect()
      if(event.currentTarget.textContent === elm.dataset.dataAttr) {
        let div = document.createElement('div');
        div.className = 'anotherClass';
        div.style.position = 'absolute';
        div.style.content = '';
        div.style.height = `${styles.height}px`;
        div.style.width = `${styles.width}px`;
        div.style.top = `${styles.top}px`;
        div.style.right = `${styles.right}px`;
        div.style.bottom = `${styles.bottom}px`;
        div.style.left = `${styles.left}px`;
        div.style.background = '#05f';
        div.style.opacity = '0.25';
        document.body.appendChild(div);
    }
  }
}

鼠標離開：

onLeave(event){
  const anotherClass = document.getElementsByClassName("anotherClass");
  for (let elm of anotherClass) {
    document.body.removeChild(elm)
  }
}

在遍歷 querySelectorAll（以獲取所需元素）之后，我使用element.getBoundingClientRect()來獲取element.getBoundingClientRect()的確切高度、寬度、頂部、右側、底部、左側。這樣，創建的新 div 將采用元素的確切大小和位置。

CSS 並沒有完全削減它，因為其他樣式表會覆蓋/弄亂樣式。

Answer 2

如果你想要的只是藍色透明高光，只需在懸停元素上添加一個偽元素。 定位當然也可以是絕對的或固定的元素。

 .element { float: left; position: relative; width: 100px; height: 100px; margin: 10px; border: 1px solid #000; text-align: center; line-height: 100px; } .element:hover::after { position: absolute; display: block; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: #05f; opacity: 0.25; } .tall { height: 200px; }

 <div class="element">Element</div> <div class="element tall">Element</div> <div class="element">Element</div>