TIL How to Make an Object React When Hovering Over Another Object Using CSS

Today I learned how to make an object do something when hovering over an entirely different object. First, if you didn’t know, you can make an object react by using the :hover pseudoclass in your CSS. Here is an example:

.some_div { background: red; }
.some_div:hover { background: blue; }

The div will be red until you hover your mouse over it, in which case it will turn blue. What I learned to do today was how to make one div change when a the mouse is hovering over a completely different div. This is accomplished by adding another selector like this:

.other_div { background: green; }
.some_div:hover + .other_div { background: purple; }

In this case, when you hover over .some_div, the adjacent sibling div (accomplished with the + selector) .other_div will turn from green to purple. I used this particularly when I was working with CSS3 transitions (making divs move around and change over time). Feel free to use the selector that will accomplish your particular task. Here is a JSfiddle for further clarification.

Leave a Reply

Wordpress theme JaeDubya © 2018 | All Right Reserved | Designed & coded by J. Arthur Wetenkamp