jquery/css 在 IE 中的 jquery show 上更改 css

Question

我用 jquery 做了一个悬停函数。在 FireFox 和 Chrome 中一切正常，问题在 IE 中。我更改了 css top/left 并使用 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");
});