Question

我在这里做了一个小例子：http://jsfiddle.net/3hFrJ/

$('#element').click(function(){
    $(this).animate({'left': '200px'})
}

如果你悬停红色div，它会变成蓝色。然后你点击它，它远离鼠标指针，但浏览器认为它悬停，直到你移动鼠标。（我有谷歌浏览器浏览器）

如何让浏览器刷新元素的悬停状态？

Answer 1

您可以尝试使用jquery而不是使用css来添加hover效果然后在点击事件

上重置hover状态

$('#element').hover(function(){
    $(this).css({backgroundColor: 'blue'});
}, function(){
    $(this).css({backgroundColor: 'red'});
});
$('#element').click(function(){
    if ($(this).css('left') == '200px')
        $(this).animate({'left': '20px'})   /// move left
    else
        $(this).animate({'left': '200px'})  /// move right
    $(this).trigger('mouseout');
});

Here是更新后的fiddle链接

虽然这也不完美（如果元素超出游标范围时刷新悬停状态）但是仍然可以选择在单击元素时或动画完成后立即重置悬停状态

Answer 2

您可以使用稍大的容器添加一些额外的标记，然后将变换应用于您的孩子。所以你不会得到闪烁的效果

浏览器认为元素在被js移开时仍然悬停

2 个答案: