title: How to make a hover state "sticky"
body: <p>I'm using <em>nearly</em> pure css, (doing this in css only is <em>not</em> a requirement) background images and adjacent selectors for a page that presents unique human-readable textual information (via a div left side of page with the class name "default-text") when the user hovers over horizontally stacked images (on the right side of the page, where each image is uniquely classed with a sequentially suffixed classname, i.e., .hover1, .hover2, through .hover7).</p>
  
  <p>If you load the page (in the jsfiddle link, below) and run the code, the page works. However, I'd like to enable a "sticky" hover state, one where when the user moves the cursor off the image the state for the image and the accompanying text remains in a hover state until either: mouse hovers another of the images OR a period of time lapses. Let's say 10 seconds.</p>
  
  <h3>For example; here's two rows of HTML for the images:</h3>
  
  <pre><code>&lt;div class="hover1"&gt;&lt;/div&gt;
      &lt;div class="hover1text hovertext"&gt;
          &lt;h3&gt;Best-in-Class BBQ&lt;/h3&gt;
          &lt;p&gt;tons of text&lt;/p&gt;
          &lt;p&gt;Lots more awesome text&lt;/p&gt;
      &lt;/div&gt;
  &lt;div class="hover2"&gt;&lt;/div&gt;
       &lt;div class="hover2text hovertext"&gt;
           &lt;h3&gt;Penetration and Vulnerability Tenderloin&lt;/h3&gt;
            &lt;p&gt;More awesome text&lt;/p&gt;
            &lt;p&gt;What you wanted&lt;/p&gt;
        &lt;/div&gt;
  etc for the balance of the 7 items
  </code></pre>
  
  <h3>A portion from my CSS:</h3>
  
  <pre><code>.context-services .region-inner .field-name-body .float-right .hover1 {
      background-image: url(https://dl.dropboxusercontent.com/u/67315586/buttons/1_off.png);
      transition: 0s background;
  }
  .context-services .region-inner .field-name-body .float-right .hover1:hover {
      background-image: url(https://dl.dropboxusercontent.com/u/67315586/buttons/1_hover.png);
      transition: 0s background;
  }
  .context-services .region-inner .field-name-body .float-right .hover1 + .hover1text {
      opacity: 0;
      transition: 0s all;
  }
  .context-services .region-inner .field-name-body .float-right .hover1:hover + .hover1text {
      opacity: 1;
      transition: 0s all;
  }
  </code></pre>
  
  <p>My jsfiddle.net for this is <a href="http://jsfiddle.net/Kyle_Skrinak/y676Q/" rel="nofollow">here</a>.</p>
  
  <p>Any insight appreciated; thanks!</p>