CSS: How to fake a :hover state?

Here, I have several divs. When mouse hover them, there would be a transition effect. (like the left-inner corner)

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.

For HTML & CSS：

    <div class="story" id="target">
      <!--content-->
    </div>
    <div class="story">
      <!--content-->
    </div>
    <div class="story">
      <!--content-->
    </div> 

.story{
  background: none repeat scroll 0 0 #2A2A2A;
  &:hover{
    transition: all 0.25s ease-in-out 0s;
    background: none repeat scroll 0 0 lighten(#2A2A2A, 20%);
  }
}

What I want to do:

At start, the div#target is forced into :hover 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 :hover state, and the div#target go back to normal state.

It's pretty much like a autofocus when we using input field

UPDATES: I want to trigger hover state of an element as soon as someone enters this page.

jQuery: Automatically trigger hover