WolfPack!

I want to highlight any element I hover over just like the Chrome Dev Tools does it.

Picture of Chrome Dev Tools

Notice how the entire element is drenched in a blue tint? This is not as simple as adding a background color or linear-gradient because the insides of input elements are still white.

I've tried using the different filter methods like hue rotate, contrast w/brightness, and even THIS MONSTER, but nothing seems to work.

The closest I've been is just a nice looking box-shadow around the elements for highlighting.

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;

Help me make my dreams e true

WolfPack!

I want to highlight any element I hover over just like the Chrome Dev Tools does it.

Picture of Chrome Dev Tools

Notice how the entire element is drenched in a blue tint? This is not as simple as adding a background color or linear-gradient because the insides of input elements are still white.

I've tried using the different filter methods like hue rotate, contrast w/brightness, and even THIS MONSTER, but nothing seems to work.

The closest I've been is just a nice looking box-shadow around the elements for highlighting.

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;

Help me make my dreams e true

• javascript
• html
• css
• google-chrome-devtools

• 2 Well, if positioning doesn't cause side effects, just add an absolutely positioned pseudo element with some transparency over the element. – Roope Commented Oct 12, 2016 at 16:10
• I've thought of that and it makes sense for one element. But I'm looping through all elements on my website and creating a highlight on hover. Each element has different sizes. I'd just thought there'd be an easier way than creating a new absolutely positioned pseudo element for every element I have on the page – Craig1123 Commented Oct 12, 2016 at 16:16
• It doesn't get much easier than adding a pseudo element. Again, assuming that there's no side effects with the positioning. See my answer. – Roope Commented Oct 12, 2016 at 16:27

2 Answers 2

If anyone cares what I did to solve it, here is my code (thanks to the help of 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)
  }
}

After looping through the querySelectorAll (to get the desired elements), I used element.getBoundingClientRect() to get the exact height, width, top, right, bottom, left of the element.. That way, the new div created will take the exact size and location of the element.

CSS didn't quite cut it because other stylesheets would override/mess the styling up.

If all you want is the blue transparent highlight, just add a pseudo element over the hovered element. Positioning may of course be absolute of fixed for the element as well.

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