How can we add hover effects by hovering something else, like given below? (HTML, CSS3)

I made two divs and what I want, is to use pure CSS and add something like when I hover the first div the other div change its background. Here is my code!

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Hover Effects</title>
<style type="text/css">
#boxOne{
  background:grey;
  height:100px;
  width:100px;
  float:left;
}
#boxTwo{
  background:cyan;
  height:100px;
  width:100px;
  float:right;
}
</style>
</head>
<body>
  <div id="boxOne"></div>
  <div id="boxTwo"></div>
</body>
</html>

solution

Assuming they are adjacent siblings, you could use the adjacent sibling combinator, +:

EXAMPLE HERE

#boxOne:hover + #boxTwo {
  background:red;
}

Alternatively, you could use the general sibling combinator, ~. Both of which assume the elements are succeeding siblings, previous siblings won’t be selected.

#boxOne:hover ~ #boxTwo {
  background:red;
}