jquery/css在IE浏览器的jQuery显示中更改css

Question

我用jQuery制作了悬停功能。所有在FireFox和Chrome中运行良好，问题出在IE上。我更改CSS顶部/左侧，并使用jquery.show使div可见。虽然在IE中第一次将它悬停，但它显示的位置不对。第二次它显示就好了..

var x = (e.pageX - this.offsetLeft) - $(this).next("div").width(); 
var y = e.pageY - this.offsetTop; 



$(this).next("div").css({ display: 'block', 'position': 'fixed', zIndex: 2, left: x, top: y }); 

$(this).next("div").show("slow"); 

它再次在Chrome和Firefox，但是IE的伟大工程。（我只测试IE9）

这是CSS div的在默认情况下将其隐藏：

display:none; 
position:fixed; 
z-index:2; 

Answer 1

您正在运行到这个问题，因为当你计算x股利尚未完全加载。 jQuery不知道div的宽度是多少，因此返回0.下一次，当然div已经加载了，jQuery的宽度是正确的。

您可以通过设置right而不是left来更正此问题。这提高了动画为好，在我看来：

http://jsfiddle.net/gilly3/gup8u/22/

$('.linkin').hover(function(e) { 
    var x = document.documentElement.offsetWidth - e.pageX; 
    var y = e.pageY; 

    $(this).next("div").css({ 
     right: x, 
     top: y 
    }).stop(true, true).show("slow"); 
}, 
function() { 
    $(this).next().addClass('tooltip').stop(true, true).hide("slow"); 
});