我用 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;
最佳答案
您遇到此问题是因为在您计算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");
});
关于jquery/css 在 IE 中的 jquery show 上更改 css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9282901/