Q:

How to set :hover as default and reset once moused over?

I am currently working on a website that has two columns of square images. Each column has 3 images, so 6 images total. Each image has a hover state with text and a 'learn more' link. 
The intent is that users hover over each image to learn more about the client's company. To help facilitate users hovering over the images, I am trying to force the first image to have it's hover state as the default view. If you mouse over it, once your mouse leaves, it resets to just the plain image, and resumes normal hover functionality. 
If possible, what is the best way to accomplish this effect?

A:

If it's OK to use jQuery, keep reading.
Instead of having the pseudo class :hover on the first item, you can give it a real class such as .active, either in the markup or through jQuery, and make the style exactly the same as :hover. Then remove the that class when it was hovered once.
Demo: http://jsfiddle.net/96mwjs0x/1/
HTML
<ul>
    <li>11111</li>
    <li>22222</li>
    <li>33333</li>
</ul>

CSS
li:hover,
li.active {
    color: red;
}

jQuery
$(function() {
    $("li:first-child").addClass("active")
    $(".active").mouseover(function() {
      $(this).removeClass("active");
    });
});

