CSS: How to make one element react to a hover of a element that is after it

Asked Aug 15 '16 at 18:40

Active Aug 15 '16 at 18:48

Viewed 21 times

I did a very simple demo in JSFiddle to illustrate my question.

I have two squares: a red #square1 and a blue #square2. What I want is very simple: when you hover the red square the other one turns red, and the same for the blue square.

The first one worked, using this code:

#square1:hover + #square2 {
  background-color: red;
}

The next effect did not work though. Used the ~ as I thought that that is what I should use for elements that are declared before?

#square2:hover ~ #square1 {
  background-color: blue;
}

How can I make it work using only CSS?

asked Aug 15 '16 at 18:40

cabralpinto

1,814
3
13
32

1

No..there is no [**previous sibling**](http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-css-selector) selector. – Paulie_D Aug 15 '16 at 18:47
You cannot do this with CSS because CSS cannot traverse the DOM backward. You need JavaScript. – TylerH Aug 15 '16 at 18:48
@Joca Pinto u can mask square through :after/:before other square – Andrei Fedorov Aug 15 '16 at 18:59
Did it with javascript, thanks for the help – cabralpinto Aug 15 '16 at 21:23

CSS: How to make one element react to a hover of a element that is after it

0 Answers0