css - 单击动画 Sprite 时触发鼠标离开

Question

我有一个包含 sprite 图像的链接，鼠标悬停时带有 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%);
}

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

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

Answer 1

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

更改您的 css

a:hover img {

到

a.hovered img {

因此将其设置为一个单独的类，而不是 css 状态。然后在您的 JS 中，您可以像以前一样保留点击处理程序(即使我使用了 'mouseout' 但它不重要)并添加一个 hover() 处理程序，如

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

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