像 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>