Question

我有一个包含精灵图像的链接，鼠标悬停时带有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显示问题。单击该链接时，将按预期打开一个新选项卡。但当你回到小提琴时，精灵仍处于悬停状态。如何将其恢复到正常（非悬停）状态？我试图用jQuery触发mouseleave事件，但它失败了。

Answer 1

事件被正确触发但CSS仍然将其视为＆＃39;：hover＆＃39;国家（我不认为你可以用javascript改变它）。因此，您可以从

更改您的CSS

a:hover img {

到

a.hovered img {

因此将其设置为一个类而不是一个css状态。然后在你的JS中，你可以像以前一样离开点击处理程序（即使我使用了＆＃39; mouseout＆＃39;但它不应该重要）并添加一个像

这样的hover（）处理程序

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

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

Answer 2

使用jQuery而不是CSS :hover伪类自定义悬停行为：

<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/

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

2 个答案: