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）

这是 div 默认隐藏的 CSS：

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

Answer 1

您遇到此问题是因为在计算 x 时 div 尚未完全加载。 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");
});