title: CSS: How to fake a :hover state?
body: <p><img src="https://i.stack.imgur.com/8Q57G.jpg" alt="enter image description here"></p>
  
  <p>Here, I have several divs. When mouse hover them, there would be a transition effect. (like the left-inner corner)</p>
  
  <p>I want to fake a hover at first. For example, make the left-outer corner div in :hover state at first, without user's actual hover action. And then, when user really hovers over other divs, the fake hover state cancelled.  </p>
  
  <p>For HTML &amp; CSS：</p>
  
  <pre><code>    &lt;div class="story" id="target"&gt;
        &lt;!--content--&gt;
      &lt;/div&gt;
      &lt;div class="story"&gt;
        &lt;!--content--&gt;
      &lt;/div&gt;
      &lt;div class="story"&gt;
        &lt;!--content--&gt;
      &lt;/div&gt; 
  
  .story{
    background: none repeat scroll 0 0 #2A2A2A;
    &amp;:hover{
      transition: all 0.25s ease-in-out 0s;
      background: none repeat scroll 0 0 lighten(#2A2A2A, 20%);
    }
  }
  </code></pre>
  
  <p>What I want to do:</p>
  
  <p>At start, the <code>div#target</code> is forced into <code>:hover</code> state(So it has a different background). Later, when the user starts to use his mouse and hover to other divs, other divs changes into <code>:hover</code> state, and the <code>div#target</code> go back to normal state.</p>
  
  <p>It's pretty much like a <code>autofocus</code> when we using input field</p>
  
  <p>UPDATES:
  I want to trigger hover state of an element as soon as someone enters this page.</p>
  
  <p><a href="https://stackoverflow.com/questions/11720903/jquery-automatically-trigger-hover">jQuery: Automatically trigger hover</a></p>