How to write conditional css?

Question

If user hovers on div1, div2 should get highlighted. How to write such conditional css? HTML:

<body>
  <div class='div1'></div>
  <div class='div2'></div>
</body>

you'll need javascript for this. Give it a try and post your code if you're having issues. — Toby, Jul 24 '16 at 15:59
It can easily be done with just CSS. But you should at least try something first — Clive, Jul 24 '16 at 16:01
What definition of "highlighted" are you thinking of that couldn't be handled by CSS @Toby? — Clive, Jul 24 '16 at 16:04
Alright, adjacent selector will do it for altering style.. my bad. For all this conversation someone could have just posted an answer.. lol. — Toby, Jul 24 '16 at 16:06
You do not really need js for this, but it's much better to do it with JS. http://jsfiddle.net/jstam/2cdaV/ — damiano celent, Jul 24 '16 at 16:09

Asons · Accepted Answer · 2016-07-24T16:18:16.413

1

Here I used the sibling selector ~.

div {
  height: 30px;
}
.div1 {
  background: red;
}
.div2 {
  background: blue;
}
.div1:hover ~ .div2 {
  background: yellow;
}

<div class='div1'></div>
<div class='div2'></div>

If there would be more than 1 div2 and you only want the first immediate use the adjacent sibling selector +

div {
  height: 30px;
  margin-top: 5px;
}
.div1 {
  background: red;
}
.div2 {
  background: blue;
}
.div1:hover + .div2 {
  background: yellow;
}

<div class='div1'></div>
<div class='div2'></div>
<div class='div2'></div>

edited Jul 24 '16 at 16:18

answered Jul 24 '16 at 16:13

Asons

thanks a ton @LGSon , that's wxact what I was looking for. – Sangram Jagtap Jul 24 '16 at 16:17

1 Answers1