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>