html - 悬停时连续显示div闪烁

用户何时悬停？ glyphicon，我想显示一个鼠标周围的信息卡。

我使用以下代码实现了此目的，但是将鼠标悬停在图标上时，使用Chrome时div就像闪光灯一样不断闪烁。

在IE中工作正常，而在Firefox中，div根本不出现

为什么？

的HTML

<span class="glyphicon glyphicon-info-sign"></span>
<div id="machinesInfo" class="infoCard">
    some cool text
</div>

jQuery查询

$(document).on('mousemove', function(e){
    $('.infoCard').css({
        left:  e.pageX,
        top:   e.pageY
    });
});

的CSS

.infoCard {
    display: none;
    position: absolute;
}

.glyphicon-info-sign:hover + .infoCard {
    display: block;
}

最佳答案

将我的JS调整为

$(document).on('mousemove', function(e){
    $('.infoCard').css({
        left:  e.pageX + 20,
        top:   e.pageY + 20
    });
});

现在效果很好