单击动画精灵时触发鼠标离开

Question

我有一个 link 包含精灵图像，鼠标悬停时有一个 CSS 动画。

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%);
}

动画效果很好，但是当我单击 link 时，它仍然处于悬停状态。

这里 fiddle 显示了问题。当您单击 link 时，将按预期打开一个新选项卡。但是当你回到 fiddle 时，精灵仍然处于悬停状态。我怎样才能把它恢复到正常（非悬停）状态？我尝试用 jQuery 触发 mouseleave 事件，但失败了。

Answer 1

事件已正确触发，但 CSS 仍将其视为“:hover”状态（我认为您无法使用 javascript 更改它）。因此，您可以将 css 从

更改为

a:hover img {

至

a.hovered img {

因此将其设置为 class 本身而不是 css 状态。然后在您的 JS 中，您可以像以前一样保留点击处理程序（即使我使用 'mouseout' 但没关系）并添加一个 hover() 处理程序，如

$('a').click(function() {    
    $(this).trigger('mouseout');    
});

$('a').hover(function() {    
    $(this).addClass('hovered');
}, function(){
    $(this).removeClass('hovered');
});

Answer 2

自定义悬停行为 jQuery 而不是 CSS :hover 伪 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');
});

查看实际效果：http://jsfiddle.net/gssw0dm6/

单击动画精灵时触发鼠标离开

Trigger mouse leave when animated sprite is clicked

css

animation

sprite

hover