title: Image rollovers without JavaScript
body: <p>I'm trying to discover a way that doesn't use javascript that allows you to hover over the smaller divs (or images) to change the background of the larger div. Is this possible purely with HTML &amp; CSS?</p>
  
  <p>The example has 2 problems:
  1. Only rolling over one of the divs works (because it's straight after)
  2. When rolling over that div, the background of the main div reverts after moving the mouse off, so it's not a permanent change</p>
  
  <p>I'm very curious and appreciate any advice here, thanks!</p>
  
  <hr>
  
  <p><strong>UPDATE:</strong>
  I've just created this: <a href="https://jsfiddle.net/ehzsmusr/" rel="nofollow noreferrer">https://jsfiddle.net/ehzsmusr/</a></p>
  
  <p>The backgrounds seem to change, but don't stay when you hover over something else. Can this be fixed?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#main {
    width: 300px;
    height: 200px;
    background: red;
    float: left;
  }
  .hover1 {
    float: left;
    background: blue;
    width: 100px;
    height: 75px;
  }
  .hover2 {
    float: left;
    background: green;
    width: 100px;
    height: 75px;
  }
  .hover1:hover + #main {
      background: #ccc
  }
  .hover2:hover + #main {
      background: #ccc
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='container'&gt;
    
    &lt;div class='hover1'&gt;&lt;/div&gt;
    &lt;div class='hover2'&gt;&lt;/div&gt;
    &lt;div id='main'&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>