Trigger mouse leave when animated sprite is clicked - css

Question

I have a link containing a sprite image, with a CSS animation on mouse hover.
a {
display:inline-block;
width:48px;
height:48px;
overflow:hidden;
}
a img {
-webkit-transition: 250ms ease-out;
-moz-transition: 250ms ease-out;
-o-transition: 250ms ease-out;
transition: 250ms ease-out;
}
a:hover img{
-webkit-transform: translate(0,-50%);
-moz-transform: translate(0,-50%);
-ms-transform: translate(0,-50%);
-o-transform: translate(0,-50%);
transform: translate(0,-50%);
}
Animation works fine, but when I click the link, it remains on hover state.
Here's a fiddle showing the problem. When you click the link, a new tab is opened as expected. But when you come back to the fiddle, the sprite is still in hover state. How can I bring it back to normal (not-hover) state? I've tried to trigger mouseleave event with jQuery, but it failed.

Answer 1

The event is fired correctly but the CSS still sees it as ':hover' state (and I don't think you can change that with javascript). Therefore you could change your css from
a:hover img {
to
a.hovered img {
thus setting it as a class on its own and not a css state. Then in your JS you can leave the click handler as before (even though I used 'mouseout' but it shouldn't matter) and add a hover() handler like
$('a').click(function() {
$(this).trigger('mouseout');
});
$('a').hover(function() {
$(this).addClass('hovered');
}, function(){
$(this).removeClass('hovered');
});

Answer 2

Customize hover behavior with jQuery instead of CSS :hover pseudo class:
<a id='theLink' href="http://www.facebook.com" target="_blank"><img src="http://bradsknutson.com/wp-content/uploads/2013/05/facebook-hover.png" alt="Facebook"/></a>
a {
display:inline-block;
width:48px;
height:48px;
overflow:hidden;
}
a img {
-webkit-transition: 250ms ease-out;
-moz-transition: 250ms ease-out;
-o-transition: 250ms ease-out;
transition: 250ms ease-out;
}
.hover{
-webkit-transform: translate(0,-50%);
-moz-transform: translate(0,-50%);
-ms-transform: translate(0,-50%);
-o-transform: translate(0,-50%);
transform: translate(0,-50%);
}
$('#theLink').mouseenter(function(){
$(this).children().first().addClass('hover');
}).mouseleave(function(){
$(this).children().first().removeClass('hover');
}).click(function(){
$(this).children().first().removeClass('hover');
});
See it in action: http://jsfiddle.net/gssw0dm6/