title: How can we add hover effects by hovering something else, like given below? (HTML, CSS3)
body: <p>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.<br>
  Here is my code!</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset=utf-8 /&gt;
  &lt;title&gt;Hover Effects&lt;/title&gt;
    &lt;style type="text/css"&gt;
      #boxOne{
        background:grey;
        height:100px;
        width:100px;
        float:left;
      }
      #boxTwo{
        background:cyan;
        height:100px;
        width:100px;
        float:right;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="boxOne"&gt;&lt;/div&gt;
    &lt;div id="boxTwo"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>