像 Javascript 中的 Chrome 开发工具一样突出显示 HTML 元素答案

【问题标题】：Highlight HTML element just like the Chrome Dev Tools in Javascript像 Javascript 中的 Chrome 开发工具一样突出显示 HTML 元素
【发布时间】：2017-02-21 12:44:24
【问题描述】：

狼群！

我想像 Chrome 开发工具一样突出显示我悬停的任何元素。

Picture of Chrome Dev Tools

注意到整个元素是如何被染成蓝色的吗？这不像添加背景颜色或线性渐变那么简单，因为输入元素的内部仍然是白色的。

我尝试过使用不同的滤镜方法，例如色相旋转、亮度对比度，甚至 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;

帮我实现梦想

【问题讨论】：

好吧，如果定位不会产生副作用，只需添加一个绝对定位的伪元素，并在元素上添加一些透明度。
我已经想到了这一点，这对于一个元素来说是有意义的。但我正在循环浏览我网站上的所有元素并在悬停时创建一个亮点。每个元素都有不同的大小。我只是认为有比为页面上的每个元素创建一个新的绝对定位的伪元素更简单的方法
这并不比添加伪元素容易得多。同样，假设定位没有副作用。看我的回答。

标签： javascript html css google-chrome-devtools

【解决方案1】：

如果你想要的只是蓝色透明高亮，只需在悬停元素上添加一个伪元素。对于元素来说，定位当然也可以是绝对的。

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

【讨论】：

嘿！真的很近。我将它添加到我的页面。我只看到一个问题，我在父元素中有子元素。但这真的很接近我正在寻找的东西。我想我可以弄清楚其余的。谢谢！ :)
如果您正在谈论将悬停传播到父级，只需搜索它，您就会发现一些技巧。例如。 stackoverflow.com/questions/17923922/…
哇！还有一个！！！这就像圣诞节。你只要继续付出。我真的很感激

【解决方案2】：

如果有人关心我做了什么来解决它，这是我的代码（感谢 Roope 的帮助）：

onMouseEnter：

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() 获取元素的确切高度、宽度、顶部、右侧、底部、左侧。这样，创建的新 div 将占用元素的确切大小和位置。

CSS 并没有完全削减它，因为其他样式表会覆盖/弄乱样式。

【讨论】：