Question

沃尔夫帕克！

我想突出显示我悬停在屏幕上的所有元素，就像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;

帮助我实现梦想

Answer 1

如果有人关心我做了什么来解决它，这是我的代码（感谢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);
    }
  }
}

OnMouseLeave在：

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

在循环遍历querySelectorAll（以获取所需元素）之后，我使用element.getBoundingClientRect()来获取元素的确切高度，宽度，顶部，右侧，底部，左侧。这样，创建了新的div将采用元素的确切大小和位置。

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

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: