Highlight HTML element just like the Chrome Dev Tools in Javascript

Question

WolfPack!

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

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 come true

Well, if positioning doesn't cause side effects, just add an absolutely positioned pseudo element with some transparency over the element. — user1425689
– user1425689, 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
– 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. — user1425689
– user1425689, Commented Oct 12, 2016 at 16:27

gilad905 · Accepted Answer · 2020-11-16 17:15:07Z

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.

score 2 · Accepted Answer · 2016-10-12 16:30:00Z

2

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>

edited Oct 12, 2016 at 16:30

answered Oct 12, 2016 at 16:26

user1425689

3 Comments

Craig1123 Over a year ago

Hey! Really close. I added it to my page. I only see one problem, I have child elements inside of parent elements. But this is really close to what I'm looking for. I think I can figure the rest out. Thanks! :)

user1425689 Over a year ago

If you're talking about hover propagation to the parent, just search for it and you'll find some tricks around it. E.g. stackoverflow.com/questions/17923922/…

Craig1123 Over a year ago

Wow! And another!!! It's like Christmas. You just keep giving. I really appreciate it

Collectives™ on Stack Overflow

Highlight HTML element just like the Chrome Dev Tools in Javascript

2 Answers 2

Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Linked

Related