2

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

Craig1123
  • 1,510
  • 2
  • 17
  • 25
  • 2
    Well, if positioning doesn't cause side effects, just add an absolutely positioned pseudo element with some transparency over the element. – Roope Oct 12 '16 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 Oct 12 '16 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 Oct 12 '16 at 16:27

2 Answers2

6

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.

gilad905
  • 2,842
  • 2
  • 16
  • 23
Craig1123
  • 1,510
  • 2
  • 17
  • 25
1

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>
Roope
  • 4,469
  • 2
  • 27
  • 51
  • 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! :) – Craig1123 Oct 12 '16 at 16:29
  • If you're talking about hover propagation to the parent, just search for it and you'll find some tricks around it. E.g. http://stackoverflow.com/questions/17923922/hover-on-child-without-hover-effect-on-parent – Roope Oct 12 '16 at 16:31
  • Wow! And another!!! It's like Christmas. You just keep giving. I really appreciate it – Craig1123 Oct 12 '16 at 16:33