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

狼群

我想突出显示我悬停在上面的任何元素，就像Chrome开发工具那样

注意，整个元素是如何浸透在蓝色色调中的？这并不像添加背景色或线性渐变那样简单，因为输入元素的内部仍然是白色的

我尝试过使用不同的过滤方法，如色调旋转、对比度和亮度，甚至，但似乎没有任何效果

我所见过的最接近的只是一个漂亮的阴影框，围绕着高亮显示的元素

Javascript:element.classList.add'anotherClass'

CSS:box shadow:0 0 5px 3fd290，0 0 10px 36A9F7，0 0 15px 36A9F7，0 0 20px 36A9F7！重要的

---

帮助我实现我的梦想

如果您只需要蓝色透明高亮显示，只需在悬停的元素上添加一个伪元素即可。当然，元素的定位也可能是绝对固定的

.元素{ 浮动：左； 位置：相对位置； 宽度：100px； 高度：100px； 利润率：10px； 边框：1px000； 文本对齐：居中； 线高：100px； } .element:hover:：after{ 位置：绝对位置； 显示：块； 内容：； 排名：0； 右：0； 底部：0； 左：0； 背景：05f； 不透明度：0.25； } .高{ 高度：200px； } 要素 要素

---

元素如果只需要蓝色透明高亮显示，只需在悬停的元素上添加一个伪元素。当然，元素的定位也可能是绝对固定的

.元素{ 浮动：左； 位置：相对位置； 宽度：100px； 高度：100px； 利润率：10px； 边框：1px000； 文本对齐：居中； 线高：100px； } .element:hover:：after{ 位置：绝对位置； 显示：块； 内容：； 排名：0； 右：0； 底部：0； 左：0； 背景：05f； 不透明度：0.25； } .高{ 高度：200px； } 要素 要素

---

Element如果有人关心我是如何解决它的，这是我的代码，感谢Roope的帮助：

OnMouseCenter：

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并没有完全切断它，因为其他样式表会覆盖/弄乱样式设置。

如果有人关心我是如何解决它的，这是我的代码，感谢Roope的帮助：

OnMouseCenter：

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并没有完全消除它，因为其他样式表会覆盖/弄乱样式设置。

好吧，如果定位不会造成副作用，只需添加一个绝对定位的伪元素，并在元素上增加一些透明度。我已经想到了这一点，对于一个元素来说是有意义的。但我正在浏览我网站上的所有元素，并在hover上创建一个亮点。每个元素都有不同的大小。我只是认为有一种比为页面上的每个元素创建一个新的绝对定位的伪元素更简单的方法。它没有比添加一个伪元素简单得多。同样，假设定位没有副作用。请看我的答案。如果定位不会产生副作用，只需添加一个绝对定位的伪元素，并在该元素上添加一些透明度。我已经想到了这一点，对于一个元素来说是有意义的。但我正在浏览我网站上的所有元素，并在hover上创建一个亮点。每个元素都有不同的大小。我只是认为有一种比为页面上的每个元素创建一个新的绝对定位的伪元素更简单的方法。它没有比添加一个伪元素简单得多。同样，假设定位没有副作用。看看我的答案。嘿！非常接近。我把它添加到我的页面。我只看到一个问题，父元素中有子元素。但这真的很接近我想要的。我想我能搞定剩下的。谢谢如果您正在谈论将鼠标悬停传播到父对象，只需搜索它，您就会发现一些技巧。哇！还有一个！！！就像圣诞节一样。你只要继续付出。我真的很感激他们！非常接近。我把它添加到我的页面。我只看到一个问题，父元素中有子元素。但这真的很接近我想要的。我想我能搞定剩下的。谢谢如果您正在谈论将鼠标悬停传播到父对象，只需搜索它，您就会发现一些技巧。哇！还有一个！！！就像圣诞节一样。你只要继续付出。我真的很感激