0

Given the HTML code:

<html>
  <body>
    <div class="one"></div>
    <div class="two"></div>
  </body>
</html>

And the CSS code:

.one {height: 50px; width: 50px; background-color: orange;}
.two {height: 50px; width: 50px; background-color: yellow;}
.one:hover ~ .two {opacity: 0.5;}
.two:hover ~ .one {opacity: 0.5;}

I'm trying to do this: when one div is hovered over, it will affect the other div.

When I hover over .one, .two is affected. However, when I hover over .two, .one is not affected.

Why is this? How do I work around this?

lefrost
  • 461
  • 5
  • 17

1 Answers1

0

Use + property. It affects the next sibling not vice versa.

.one:hover + .two {}
Aman
  • 642
  • 1
  • 5
  • 12