Craig1123 Craig1123 - 1 month ago 13
CSS Question

Highlight HTML element just like the Chrome Dev Tools in Javascript

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

Answer

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>