Highlight an element when hovering on another?

Question

I'd like to add this to my first web page.
Similar to what Chrome does in web inspector : Hovering and/or clicking an element highlights/selects a corresponding element. I realized my page revolves around this and I can't advance without it. Any constructive advice would be appreciated! Thank you!

Answer 1

You will need to know the position of the element you want to highlight relative to the position of the element to be hovered.

Take a look at this post:

How to affect other elements when one element is hovered

Once you know the position and have used the proper selector use:

background-color : lightblue;

Answer 2

I guess you are asking about :hover in css, but without code it is difficult to get idea. Check below code:

.btn {
  background-color: #f4511e;
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  opacity: 0.6;
  transition: 0.3s;
}

.btn:hover {opacity: 1}

<button class="btn">Hover Over Me</button>