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

i working on website has 2 columns of square images. each column has 3 images, 6 images total. each image has hover state text , 'learn more' link.

the intent users hover on each image learn more client's company. facilitate users hovering on images, trying force first image have it's hover state default view. if mouse on it, once mouse leaves, resets plain image, , resumes normal hover functionality.

if possible, best way accomplish effect?

if it's ok use jquery, keep reading.

instead of having pseudo class :hover on first item, can give real class such .active, either in markup or through jquery, , make style same :hover. remove class when 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");     }); });